相关疑难解决方法(0)

我想知道如何在图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的原因.网格也不应该固定在页面上,因为我希望它在我调整窗口大小时重排.