Html 消除浮动元件之间的间隙

我有一些浮动的

div

，高度可变，但宽度相同。
有时两个

div

之间存在垂直间隙，如何防止这种情况发生？

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

如果您对div在列中的垂直顺序没有意见，那么可以消除这样的间隙。（请原谅内联样式。）

---

代码总是先出现在你的问题中。此外，BS graid基于12列。你的总数是42。有什么理由你不能把它放在两栏里吗？除此之外，我认为没有办法解决这个问题。@jo8691不一定，他只是定义了每个div的宽度，如果一个div不合适，它会掉下来。例如：@joshhunt不一定是什么？您说过“BS graid也是基于12列的。您的总计42列”，但这是不正确的，his仍然基于12列，只是将下一列向下推。请注意，这会将一些div拆分为两列，因此可能不是理想的解决方案，请参阅：（并不是说这个答案是错的，只是取决于他的情况）谢谢，但我想让div水平排列而不是垂直排列。而且@joshhunt是对的，我不想让div被拆分。你是在寻找类似的东西吗？如果你想让它们水平排列，我认为这不可能使用Boostrap网格如果你看一看Pinterest（我想这是你想要的），他们会使用Javascript来设置绝对位置。

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

.col-xs-12 { 

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