动态高度浮动元素之间不需要的垂直空间[重复]答案

【问题标题】：Unwanted vertical space between dynamic height floated elements [duplicate]动态高度浮动元素之间不需要的垂直空间[重复]
【发布时间】：2015-09-04 18:54:00
【问题描述】：

我有一个元素列表，这些元素以两列或并排放置在容器中。如果所有元素都具有相同的高度，则元素会完美浮动。不幸的是，当一个或几个元素的高度不同时，同样的情况不会发生，会出现一个白色间隙，破坏它。可以在这里看到一个工作示例（http://jsbin.com/juluxibuda/edit?html,css,output）。我过去已经解决了这个问题，不记得确切的方法（使用 JS 在所有元素之间保持相同的高度等），并且我知道像 Masonry 这样的库，但我想知道是否有唯一的 CSS 解决方案或者什么可以在这里完成。

html:

  <div class="container">
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foods ds dsds sd  sd<a href="#">as klasklas</a></div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo lkds kljds jkldas s</div>
    <div class="foo">fas asasoods ds dsds sd  sd<a href="#">as klasklas</a></div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foods ds dsds sd  sd<a href="#">as klasklas</a></div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo lkds kljds jkldas s</div>
    <div class="foo">fas asasoods ds dsds sd  sd<a href="#">as klasklas</a></div>
  </div>

css:

.container {
  width: 100%;
}
.container .foo {
  float: left;
  width: 40%;
  margin-right: 5%;
  margin-bottom: 10px;
  background: yellow;
}
.container .foo a {
  display: block;
}

【问题讨论】：

不...即使是 flexbox 也无法做到这一点并且保持相同的 HTML 结构。这就是砖石如此受欢迎的原因。
没错，它如此受欢迎的原因：)

标签： html css css-float removing-whitespace

【解决方案1】：

到目前为止，我发现的一种适用于这种特殊情况（但不是全部）的解决方案是将元素放置在行中（容器）。容器元素高度将防止不必要的垂直间隙。

.row {
    display: block;
    float: left;
    overflow: hidden;
    width: 100%;
    height: auto;
}

【讨论】：

是的，有这些css的类是正确的