css浮动元素,网格中左右不等的高度

Question

我想知道如何在图1中完成效果.

到目前为止我得到的是

.box { display: inline-block; vertical-align: top; width: 100px;}

这给了我如图2所示的结果.(注意:我知道我可以用float完成相同的操作:left)

我的HTML代码看起来像这样:

<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>

我希望每个元素尽可能地向左浮动,但同时向上浮动.

有可能用纯CSS执行此操作,还是需要一些JavaScript？

编辑:

对我来说重要的是整个网格位于页面的中心.这就是我使用display:inline-block的原因.网格也不应该固定在页面上,因为我希望它在我调整窗口大小时重排.

Answer 1

您可以使用受欢迎的图书馆砌体.

jQuery的动态布局插件CSS的反面浮动

这是一个代码示例 ......

$('#container').masonry({
  itemSelector: '.box'
});

以下是Github上的消息来源以及Shoptalk播客对David Desandro 的采访.

对于那些不使用jQuery的人来说,请注意还有Vanilla Masonry,它是免费的框架版本.

提示:确保父容器具有position:relative,因此所有内容都绑定到容器.

Answer 2

由于您已经在使用jquery,jquery砌体可能会让您感兴趣:http://masonry.desandro.com