27

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

4

3 回答 3

20

您可以使用流行的图书馆Masonry。

jQuery 的动态布局插件 CSS 浮动的另一面

这是一个代码示例...

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

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

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

提示：确保父容器具有 position:relative 以便所有内容都绑定到您的容器。

于 2012-07-11T14:27:49.733 回答
5

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

于 2012-07-11T14:29:26.853 回答
3

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

我在您的 span 周围添加了一个名为#container.

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

jsFiddle 演示

于 2012-07-11T14:37:08.143 回答