html - 带有 CSS 的两栏文章

Question

我想像在报纸文章中一样自动在两列中（而不是使用 2 个 div）发布单个帖子。有没有办法做到这一点？

Answer 1

你可以，使用 CSS3。有一个名为“多列布局”的新模块专门用于此目的。这是W3C 推荐的链接。

您现在可以在 Firefox、Safari、Chrome、Opera 和 Inernet Explorer 10 中使用它。查看此网页以检查跨多个浏览器版本的 CSS3 建议的兼容性。

文本应该从一列流到另一列，您不需要使用两个不同的 DIV 来伪造页面设计中的两列。您可以通过这种方式应用多个列：

column-count: 2;
column-gap: 15px;
column-rule: 1px solid black;

-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-rule: 1px solid black;

-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-rule: 1px solid black;

每个主要的渲染引擎（如 Mozilla 的 gecko 和 Chrome 的 webkit）都有自己的属性来支持这一点，这就是为什么你必须使用不同的前缀 -webkit 和 -moz。

除此之外，您还可以指定列的宽度（而不是列数）：

-moz-column-width: 300px;
-moz-column-gap: 15px;

-moz-column-width: 300px;
-moz-column-gap: 15px;

-webkit-column-width: 300px; 
-webkit-column-gap: 15px;

无论如何，您可能想要使用多个 DIV，因为遗憾的是，Internet Explorer 9 及更低版本不支持所有这些华丽的多列魔法。

Answer 2

你可以使用 CSS3多列，虽然支持不是很好

div {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 20em;
-moz-column-width: 20em;
column-width: 20em;
/* IE10 & Opera 11.1 + support this property unprefixed */
}

示例：http: //jsfiddle.net/eFznL/2/