jquery - 向右浮动砌体元素而不是堆叠

Question

我一直在处理这个 snippit 创建砖石风格的主页。但是我不想堆叠 div 元素，而是逐渐将它们向右浮动并向下平铺。

我看过这个 solution ，但它是关于列表元素的，我似乎无法让它与 div 元素一起使用。我不想使用 jquery 插件来处理这个仅供引用，我想保留它的纯 CSS。

Answer 1

您的 masonary css 属性 column-width限制列的大小并垂直堆叠 div。

如果你只想让div水平流动垂直溢出，你需要做的就是将item设置为display:inline-block并设置一个固定的宽度:

.item {
 display: inline-block;
 padding:  .25rem;
 width:  200px;
}

code example