несколько левых поплавков не будут плавать под каждым оставляющим уродливое пустое пространство

Question

При использовании следующего примера html:

<div style="width:50%;float:left;">
    test1<br/>
    test1<br/>
    test1<br/>      
</div>
<div style="width:50%;float:left">
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>      
</div>
<div style="width:50%;float:left">
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>      
</div>

Между test1 и test3 существует ужасный пробел, я ожидаю, что div test3 будет следовать сразу за test1, вместо того, чтобы оставаться пробелом до завершения test2.Эту же проблему можно увидеть и в Firefox.

Answer 1

Вы не можете это исправить с помощью чистого HTML / CSS.Однако JavaScript может сделать это.Для jQuery есть плагин Masonry , который делает именно это.

Masonry - это плагин макета для jQuery.Думайте об этом как об обратной стороне CSS-плавающих элементов.В то время как плавающие элементы располагаются горизонтально, а затем вертикально, масонство размещает элементы вертикально, а затем горизонтально в соответствии с сеткой.Результат сводит к минимуму вертикальные промежутки между элементами разной высоты, точно так же, как каменщик укладывает камни в стену.

На его домашней странице вы можете найти живую демонстрацию и несколько примеров в дикой природе.

Answer 2

Когда элемент с плавающей точкой перемещается на следующую строку, он появляется под предыдущим элементом с плавающей точкой, который вызвал его перенос.Если это нежелательное поведение, вам может потребоваться изменить иерархию - иметь контейнер для левого столбца (50%) и другой контейнер для правого столбца (остальные 50%);затем список элементов в каждом из них:

(psuedo-code):
<left 50%>
 <test1/>
 <test3/>
</left>
<right 50%>
 <test2/>
</right>