CSS: игнорирование высоты divs при плавании

Я пытаюсь отобразить некоторые снимки. Все они имеют одинаковую ширину, но разную высоту. Я пытаюсь сделать что-то вроде:

Каждое имя класса изображения является pic

<img class = "pic" src = .... />

В таблице стилей я указал атрибут float: left:

.pic{
    float:left
}

Конечный результат не тот, который ожидается, пока каждая строка выравнивается по вертикали после максимального div из строки до:

Есть ли способ решить мою проблему в чистом кросс-браузере css?

Ответ 1

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

Демо: http://jsfiddle.net/ThinkingStiff/NcxPr/

HTML:

<div id="container">
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" />
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" />
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" />
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" />
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" />
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" />
</div>

CSS

#container {
    column-count: 3;
    column-fill: balance;
    column-gap: 10px;
    width: 330px;
}

.image { 
    display: block;
    margin-bottom: 10px;
    width: 100px;
}

Вывод:

Ответ 2

Можно ли добавить дополнительную разметку?

Если да, вы можете сделать 3 столбца с плавающими divs:

<div class="column">
    <img src="1.jpg" />
    <img src="4.jpg" />
</div>

<div class="column">
    <img src="2.jpg" />
    <img src="5.jpg" />
</div>

<div class="column">
    <img src="3.jpg" />
    <img src="6.jpg" />
</div>

Или просто используйте jQuery для этого.

Ответ 3

К сожалению, вы не можете сделать это с помощью CSS2/3.

Существует jQuery Masonry, довольно маленький script, который эмулирует float: top; и работает хорошо.