html - 移除 float 元素之间的间隙

Question

我有一些高度可变但宽度相同的 float div。
有时两个 div 之间存在垂直间隙，我该如何防止这种情况发生？

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

Answer 1

这种行为是“网格”，是可以预料的。一行将在所有列中具有固定的高度。当第一列中的单元格较高时，第二列中的两个(或更多)将 float 在彼此之上。

如果您同意 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;
}