css浮动元素，网格中左右不等的高度
我想知道如何在图1中完成效果。
到目前为止我得到的是
.box { display: inline-block; vertical-align: top; width: 100px;}
这给了我图2所示的结果。（注意：我知道我可以用float完成相同的操作：left）
我的HTML代码看起来像这样：
A
B
C
D
E
F G
H
I
我希望每个元素尽可能向左浮动，但同时向上浮动。
有可能用纯CSS执行此操作，还是需要一些JavaScript？
编辑：
对我来说重要的是整个网格位于页面的中心。 这就是我使用display：inline-block的原因。 网格也不应该固定在页面上，因为我希望它在我调整窗口大小时重排。
您可以使用受欢迎的图书馆砌体 。
jQuery的动态布局插件CSS的反面浮动
这是一个代码示例 ……
$('#container').masonry({ itemSelector: '.box' });
以下是Github上的消息来源以及Shoptalk播客对David Desandro的采访。
对于那些不使用jQuery的人来说，请注意还有Vanilla Masonry这是免费的框架版本。
提示：确保父容器具有position：relative，因此所有内容都绑定到容器。
由于您已经在使用jquery，jquery砌体可能会让您感兴趣： http ： //masonry.desandro.com
好吧，如果你的目的是支持最现代的浏览器，那么CSS3多列布局可能会有所帮助。 这种方法的一个问题是它不会保持相同的顺序，但您可以使用HTML（或Javascript）中的顺序。
我在您的跨度周围添加了一个名为#container的容器。
#container { -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; }
jsFiddle演示