невыравниваемые блоки в div'ах

Тема в разделе "Веб-дизайн", создана пользователем SeeJey, 12 мар 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. SeeJey

    SeeJey

    Moderator
    • Супермодератор
    Регистр.:
    23 мар 2006
    Сообщения:
    815
    Симпатии:
    221
    :)
    давно чото тем не создавал. даже непривычно))
    дело вот в чем:
    имеется верстка:
    PHP:
    <div id="stolb_2">
      <
    div class="position">
        <
    p>dfgfdgfd</p>
        <
    p>gdgdgdg</p>
      </
    div>
      <
    div class="position">vfgergreg</div>
      <
    div class="position">
        <
    p>greg</p>
        <
    p>freg</p>
      </
    div>
      <
    div class="position"></div><div class="position"></div></div>
    PHP:
    div#stolb_2{float:right;width:504px;}
    div.position{width:215px;float:left;border:1px solid #4d4d4d;margin-left:9px;padding:13px;margin-bottom:10px;}
    в итоге получаем:
    [​IMG]

    цель: сделать так чтобы если высота блоков разная - они не выравнивались таким образом относительно друг друга, а было б так:
    [​IMG]

    у кого какие мысли? :)
    пасибо
     
  2. KillDead

    KillDead

    Регистр.:
    11 авг 2006
    Сообщения:
    883
    Симпатии:
    540
    можно попробовать в левые и правые дивы разделить и запихтуть в дивы
    HTML:
    <style>
    div#stolb_2{float:right;width:554px;}
    div.position{width:215px;float:left;border:1px solid #4d4d4d;margin-left:9px;padding:13px;margin-bottom:10px;}  
    div.position2{width:215px;float:left;border:1px dotted #4d4d4d;margin-left:9px;padding:13px;margin-bottom:10px;}  
    </style>
    <div id="stolb_2">
      <div class="position2">
      <div class="position">
        <p>dfgfdgfd</p>
        <p>gdgdgdg</p>
      </div>
        <div class="position"></div>
      </div>
      
       <div class="position2">
      <div class="position">vfgergreg</div>
      <div class="position">
        <p>greg</p>
        <p>freg</p>
      </div>
    <div class="position"></div></div>  
    </div>  
     
    SeeJey нравится это.
  3. SeeJey

    SeeJey

    Moderator
    • Супермодератор
    Регистр.:
    23 мар 2006
    Сообщения:
    815
    Симпатии:
    221
    а, сразу забыл сказать(( такой вариант исключается к сожалению(
    но спасибо.
    у кого какие другие мысли?)
     
  4. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    Нужно задать для блоков height, как вариант min-height.
     
    SeeJey нравится это.
  5. SeeJey

    SeeJey

    Moderator
    • Супермодератор
    Регистр.:
    23 мар 2006
    Сообщения:
    815
    Симпатии:
    221
    вообще тоже вариант конечно... но у меня в этих блоках контент генерится который в разных случаях разной длинны, и задавать мин-хайт не оч корректно( спасибо.
    пришлось немного переделать блоки, че поделать...
    если у кого есть еще какое-нить решение - пишите, буду очень благодарен.
    спасибо.
     
  6. KillDead

    KillDead

    Регистр.:
    11 авг 2006
    Сообщения:
    883
    Симпатии:
    540
    Как немного левый вариант - сделать положение абсолютным и выравнить с помощью js.
     
    SeeJey нравится это.
  7. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    можно использовать для этого JavaScript, как показано здесь. Но, ИМХО, я бы не стал использовать из-за этого Java. Лучше бы подумал как решить с добавлением других div.
     
    SeeJey нравится это.
  8. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    SeeJey нравится это.
  9. KillDead

    KillDead

    Регистр.:
    11 авг 2006
    Сообщения:
    883
    Симпатии:
    540
    По моему задача стоит не выравнить слои- если в левом много текста а в правом мало, то получится кособоко- а сделать так, чтобы слои вставали без зазора, при этом не группируя их и не изменяя размер. Хотя всё зависит от ТЗ.
    Лично я выхода не вижу:nezn:, только js.
     
    SeeJey нравится это.
  10. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    Интересно, что имменно так начнёт показывать firefox, если изменить float на right в position

    Код:
    div.position{width:215px;[B][COLOR=Red]float:right[/COLOR][/B];border:1px solid #4d4d4d;margin-left:9px;padding:13px;margin-bottom:10px;}  
    
    но если добавить хоть один пиксель в padding или ещё куда, то появляются пробелы между блоками как в float:left. Это наверное баг в firefox, в других браузерах нормально всё.


    Решение вроде для всех браузеров, надо поочерёдно менять выравнивание для каждого блока:

    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    div#stolb_2{
        float:right;
        width:504px;
        border:1px solid #FF0000;
    }
    div.position{
        width:215px;
        border:1px solid #4d4d4d;
        margin-left:9px;
        padding: 13px;
        margin-bottom:10px;
        float:left;
    } 
    
    div.right{
        float:right;
    }
    
    -->
    </style>
    </head>
    
    <body>
    
    
    <div id="stolb_2">
    
      <div class="position">
        <p>1dfgfdgfd</p>
        <p>gdgdgdg</p>
      </div>
      
      <div class="position right">2vfgergreg<br /><br /><br /><br /><br /><br /><br /><br /></div>
    
      <div class="position">
        <p>3greg</p>
        <p>freg<br /><br /></p>
      </div>
      
    
    
    
      <div class="position right">4 dsfsdfsdf sdf sdf sf sdf sfd sdf sdf sdf sd fsd fsdf sd fsd fsdfsdf sd fsdfsd fsdfsd fsd<br /></div>
      
      <div class="position">5</div>
      
      <div class="position right">6df ds fsdf dsf dsf dsf ddsf sdfsd fsd</div>
    </div>  
      
      
      
    </body>
    </html>
    
    
     
    SeeJey нравится это.
Статус темы:
Закрыта.