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

Question

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

到目前为止我得到的是

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

这给了我图2所示的结果。 （注意：我知道我可以用浮点数完成相同的操作：左）

我的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

您可以使用热门图书馆Masonry。

  

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

以下是代码example ...

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

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

对于不使用jQuery的人，请注意还有Vanilla Masonry这是无框架版本。

提示：确保父容器具有position：relative，因此所有内容都绑定到容器。

Answer 2

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

Answer 3

好吧，如果您的目标只是支持最新的浏览器，那么CSS3 multi-column layout可能有所帮助。这种方法的一个问题是它不会保持相同的顺序，但你可以使用HTML（或Javascript）中的顺序。

我在您的跨度周围添加了一个名为#container的容器。

#container { 
    -webkit-column-width: 100px; 
    -moz-column-width: 100px; 
    column-width: 100px; 
}

jsFiddle Demo