CSS：浮動時忽略div高度

Question

我試圖顯示一些圖片。他們都有相同的寬度，但高度不同。 我試圖做這樣的事情：

每張照片的類名是PIC

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

在我指定的浮動樣式表：左屬性：

.pic{ 
    float:left 
} 

結束結果不是預期的結果，而每行在從行之前的最高div後垂直對齊：

有沒有辦法解決我的問題在純跨瀏覽器的CSS？

Answer 1

您可以使用CSS3 column-count來做到這一點，假設您至少有一個包含元素。

演示：​​

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; 
} 

輸出：

Answer 2

不幸的是，你不能用CSS2/3做到這一點。

There isjQuery Masonry，這是一個相當小的腳本，模擬float: top;，效果很好。

Answer 3

你能夠添加一些額外的標記嗎？

如果是的話，你可以做3列浮動的div：

<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來爲你做的。