Плавающие элементы DIV не выстраиваются

Question

У меня есть погружения, которые я плаваю, чтобы они показывались рядом. Вот мой код:

.serviceMembersPosition {
    width: 190px;
    float: left;
    display: inline;
    border: 1px solid #999;
    margin: 5px 5px 5px 0;
    padding: 5px;
}

Это работает, однако, если один из DIV имеет больше информации, чем другие, он забивает поплавки Посмотрите, как есть пробел на моем скриншоте ниже. Есть ли способ преодолеть это? Я использую JQuery с моим сайтом. Может быть, есть код для этого?

альтернативный текст http://img532.imageshack.us/img532/1032/screenshot20100331at110.png

Answer 1

То, что вы видите, является нормальным поведением ..

простой трюк css заключается в clear:left каждые три элемента (так как у вас есть 3 коробки в строке)

в css3

.serviceMembersPosition:nth-child(3n+1){clear:left;}

, так как немногие браузеры поддерживают css3, вы можете использовать эквивалент jquery

$('.serviceMembersPosition:nth-child(3n+1)').css('clear','left')​​​​​​​​​​​​​​​​;​

но IE по-прежнему не может правильно отображаться ..

для IE вам придется либо обернуть каждую строку в div и установить для нее overflow:auto, либо поставить очищающий div / br после каждой строки с правилом css, которое имеет clear:both

Answer 2

Похоже, у вас проблема с переносом строк. Некоторые из ваших описаний занимают 2 строки по сравнению с теми, которые занимают 1 строку. Попробуйте использовать плагин, который может справиться с этим.

Установка равных высот с помощью jQuery

Answer 3

Чтобы избежать этого, вам нужно очищать поплавок после каждой "строки".

<div style="clear: both;"></div>

Вставьте DIV, подобный этому, перед любым DIV, который вы хотите быть самым левым в текущей строке.