刪除浮動元素之間的空隙

Question

我有一些浮動div高度可變但寬度相同。
有時候拖車divs之間有一個垂直間隙，我該如何防止這種情況？

https://jsfiddle.net/ss6pq2L0/2/

Answer 1

這種行爲是 「網格」，是可以預料的。一行將在所有列上具有固定的高度。當第一列中的單元格更高時，第二列中的兩個（或更多）將浮在彼此之上。

如果你確定div在列中是垂直排列的，你可以像這樣擺脫這些缺口。 （原諒內嵌樣式。）

<div class="row" style="column-count:2"> 
    <div class="col-xs-12"> 
    <div style="height: 80px"></div> 
    </div> 
... 
</div> 

添加此CSS將有助於保持列從項目中間突破（在現代瀏覽器）。

.col-xs-12 { 

    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
}