在多列上布置块

Question

我认为截图和一个小图表不言自明。 这就是我所拥有的：

这就是我想要的结果：

所以基本上我想说一个div可以是这么大，如果它更大，那么切掉它，把其余的放在下一个原始。 关于如何做到这一点的任何想法？

谢谢

Answer 1

以下列方式使用flexbox：

flex-flow: column wrap;

这会将flex-flow设置为列，而不是行（如示例中所示），它们将在cross-axis上对齐。换行意味着允许元素包裹并占用第二列的空间。

Answer 2

根据您的架构中的说明和＆＃39; 列，您需要一个类似报纸的布局，内容会溢出下一栏。

CSS3列模块对此很有用，并且是relatively well supported by browsers，允许您将其与前缀一起使用。

在 fiddle 中，我定义了一个lang块元素。通过设置一个column-width到langs，我们允许“lang”＆＃39; 多列中断 。

<强> CSS：

.lang {
    -webkit-column-width: 100px;
    -moz-column-width: 100px;
    column-width: 100px;
}