模仿A 2专栏杂志

Question

这不是简单的2列页面布局。相反，它是关于如何创建一个边界的css框，其行为就像是一个2列杂志页面，内容以填充第一列开始，然后仅在第一列空间不足时移动到第二列列（因为添加了更多文本，或者因为增加了字体大小）。

有关MS Word中2列布局如何工作的几张图片可能有助于澄清问题。请记住，关键点是我们事先不知道哪些内容属于第一列，哪些内容属于第二列（这是一个简单的问题）：

内容从第1栏开始：

当font-size增加时，内容会溢出到第2列：

是否可以在css中执行此操作？

Answer 1

CSS3的答案是：http://www.w3.org/TR/css3-multicol/

请参阅： http://jsfiddle.net/thirtydot/bjfVe/

#container {
    -moz-column-count: 2;
    -moz-column-gap: 1em;
    -moz-column-rule: 1px solid #666;

    -webkit-column-count: 2;
    -webkit-column-gap: 1em;
    -webkit-column-rule: 1px solid #666;

    column-count: 2;
    column-gap: 1em;
    column-rule: 1px solid #666;
}

浏览器支持是......非常可预测的：http://caniuse.com/multicolumn