如何在杂志/报纸等砖石布局中浮动元素？

我正在尝试实现一种布局，其中项目将像报纸/杂志文章部分一样浮动。它类似于什么jQuery 的砌体 http://masonry.desandro.com/做。但我试图仅使用 CSS3 来实现这一点。我想也许box显示属性可以做到这一点。尽管尝试了几次，我还是无法使项目在满足父列宽度后向下滑动。

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

标记将是这样的：

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

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

可以使用 CSS 列。Here http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3/是一个很好的解释。

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”找到了这个网站。这是第二个结果。