html - 没有垂直空间的 float DIV

Question

有没有办法在 float 不同高度的 DIV 时修复垂直空间？

例子:

<div class="container">
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=1" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x150&text=2" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=3" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=4" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=5" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x150&text=6" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=7" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=8" /></div>
</div>
<style>
    .container { width: 312px; }
    .floatingGrid { float: left; margin: 2px; }
</style>

http://jsfiddle.net/ModuLIZER/gk1cjn1t/

在我的例子中，我不关心顺序，只是元素 5 和 6 直接位于 1 和 2 的下方，没有空格。

我应该添加这个网格是响应式的，我需要支持 IE9。

Answer 1

我解决了一个类似的问题，创建 float 列并放入 div，这将模拟我想您正在寻找的网格布局。

<div class="container">
    <div class='column'>
       <div class="floatingGrid"><img src="http://placehold.it/100x100&text=1" /></div>
       <div class="floatingGrid"><img src="http://placehold.it/100x100&text=4" /></div>
       <div class="floatingGrid"><img src="http://placehold.it/100x100&text=7" /></div>
    </div>
    <div class='column'>
      <div class="floatingGrid"><img src="http://placehold.it/100x150&text=2" /></div>
      <div class="floatingGrid"><img src="http://placehold.it/100x100&text=5" /></div>
      <div class="floatingGrid"><img src="http://placehold.it/100x100&text=8" /></div>
    </div>
    <div class='column'>
       <div class="floatingGrid"><img src="http://placehold.it/100x100&text=3" /></div>
       <div class="floatingGrid"><img src="http://placehold.it/100x150&text=6" /></div>
    </div>
</div>

<style>
    .container { width: 312px; }
    .column { width:104px; float:left;  }
    .floatingGrid { }
</style>

或者，如果您不能创建列，有一些 javascript 库可以做到这一点，例如 http://masonry.desandro.com/ .