layout - 如何在杂志/报纸等砌体布局中浮动元素？

Question

我正在尝试实现一种布局，其中项目会像报纸/杂志文章部分一样浮动。这与jQuery 的 Masonry所做的类似。但我试图仅使用 CSS3 来实现这一目标。我想也许box显示属性可以做到这一点。尽管在尝试了几次之后，我无法使项目在父列宽度满足后向下滑动。

有没有办法只使用 CSS 来实现这种布局？

标记将是这样的：

<article>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>
</article>

在这里，一个部分将向左浮动并在更适合的列队列上调整自身（而不是像简单浮动那样低于前一个的基线）。

Answer 1

可以使用 CSS 列。这是一个很好的解释。

CSS：

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }

HTML：

<div>
<a href="#">Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!</a>
...and so on and so forth ad nauseum.
</div>

另外，我通过在 Google 上搜索“CSS Masonry”找到了这个网站。这是第二个结果。