css - 仅使用 CSS3 进行 Pinterest 样式堆叠

Question

是否可以仅使用 css 在页面上进行 pinterest 样式的布局/堆叠项目？

我想 CSS3 可能有一些东西可以用列做这种布局。

我已经阅读了一个教程，但它需要使用 javascript 和绝对定位来进行堆叠。

Answer 1

您可以使用 CSS3 列。它将垂直堆叠项目。http://jsfiddle.net/qLVXQ/

div.pinterest {
    width: 400px;
    column-count: 4;
    column-gap: 0;
}
div.pinterest > div {
    display: inline-block;
    vertical-align: top;
    width: 100px;
}