Очистка последнего плавающего элемента в каждой строке

Question

У меня есть набор div с переменной высотой, которые были перемещены влево. Когда в одной строке слишком много указанных div-ов, следующий div переносится в новую строку (как и должно быть). Проблема, с которой я столкнулся, заключается в том, что новая строка начинается с позиции смещения x в новой строке, так что div находится под последним div в предыдущей строке, который не имеет более высоких div за ним - довольно часто оставляя большое поле на левой стороне.

div.entry 
{
    float: left;
    width: 180px;
    padding: 10px;
}

По сути, я хочу, чтобы последний элемент div.entry в каждой «строке» (тот, что перед переносом в новую строку) очищал float, так что следующий ряд перемещенных элементов div выравнивался на одну и ту же высоту, и не имеют довольно большой разрыв с левой стороны. Иллюстрированный в ASCII:

То, что я ожидаю, произойдет:

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+
+-----+ +-----+ +-----+ +-----+
|  E  | |  F  | |  G  | |  H  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+

Что на самом деле происходит:

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+ +-----+ +-----+
                |  E  | |  F  |
                |     | |     |
                +-----+ |     |
                        +-----+
+-----+ +-----+
|  G  | |  H  |
|     | +-----+
+-----+

Michael

Answer 1

Если float: left не является обязательным, всегда есть display: inline-block, который больше подходит для данной работы. Поскольку «поточный поток» уже работает, как вы хотите.

.item {
    display: inline-block;
    vertical-align: top;
    width: 300px;
}

Это в значительной степени ведет себя правильно в современных браузерах. См скрипка .

Если вам нужна совместимость со старыми браузерами, в блоге mozilla есть хорошая статья, описывающая ситуацию: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

Другое решение (не полностью кросс-браузерное) - добавить

.item:nth-child(4n+1) { clear: left; }

Отметьте это http://jsfiddle.net/AfUL3/

Answer 3

Однажды у меня была эта проблема, я думаю, что обошел ее, установив свойство min-height для divs.

Что дало мне:

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+ 
+-----+ +-----+ +-----+ +-----+ 
|  E  | |  F  | |  G  | |  H  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+