Question

当浮动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

我解决了一个类似的问题，创建浮动列并放入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/。

Answer 2

不要使用float并使用inline-block您正在寻找的是砖石布局。

看看这个Fiddle

浮动DIV没有垂直空间

2 个答案: