消除浮动元素之间的间隙

Question

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

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

Answer 1

这种行为是＆＃34;网格＆＃34;并且是可以预期的。一行将在所有列中具有固定的高度。当第一列中的单元格较高时，第二列中的两个（或更多）将浮动在彼此的顶部。

如果您可以在列中垂直排序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;
}