CSS:浮动时忽略div高度

Question

我正在尝试显示一些照片.所有这些都具有相同的宽度但不同的高度.我正在尝试做类似的事情:

每张图片的类名都是pic

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

在样式表中我指定了float:left属性:

.pic{
    float:left
}

最终结果不是预期的结果,而每行在前一行的最高div之后垂直对齐:

有没有办法在纯交叉浏览器CSS中解决我的问题？

Answer 1

column-count假设您至少有一个包含元素,那么您可以使用CSS3进行额外的标记.

演示: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;
} 

输出: