动态高度浮动元素之间的不需要的垂直空间

Question

我有一个元素列表，这些元素位于一个容器中的两列或并排。如果所有元素具有相同的高度，则元素完全浮动。不幸的是，当一个或几个元素的高度不同时，同样的情况不会发生，出现白色间隙，打破它。这里可以看到一个工作示例（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;
}

Answer 1

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

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