如何像示例中那样制作砌体？

Question

我需要在我的网站上以砌体视图制作项目，但砌体剂量对我来说也很有效，我发现这种 CSS 方法可以满足我的需要 - http://jsfiddle.net/L6tf7u3b/1/ 在这种情况下购买元素是垂直的（您将在示例中看到），我需要这样的方式 -

1|2
3|4
5|6

Answer 1

因为在之前的代码中，一些媒体查询是允许的

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

示例 1： http://jsfiddle.net/L6tf7u3b/2/

我删除了允许列数为 3 和 5 的代码，因此现在对于 400 像素以上的所有屏幕尺寸，它只会有 2 列

示例2：刚刚看到你的评论，一个使用Flexbox的新示例

http://jsfiddle.net/ppcuh283/

很好的 Flexbox 指南 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

示例 3： 使用 Masonry 和 jQuery 的示例 http://jsfiddle.net/ppcuh283/2/

如何像示例中那样制作砌体？

How to made masonry like in example?

css

jquery

jquery-masonry

masonry