如何在例子中制作砖石？

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的代码，所以现在对于400px以上的所有屏幕尺寸，它只有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/