css - CSS 列与。浮柱

Question

在 HTML 页面上，我有三段文本（每段都在一个p标签中），我希望它们作为彼此相邻的列。

我知道 CSS3 列非常适合在正确的位置神奇地打破，以创建均匀的分割/高度，但是根据列的长度，段落从前一列的底部开始，导致布局难看。

在这种情况下使用 CSS3 列是完全错误的吗？我应该使用div标签float吗？或者最好的方法是什么？

Answer 1

假设p元素被父div元素包裹，那么以下应该起作用：

div {
    -moz-column-width: 12em; /* or whatever width you prefer... */
    -ms-column-width: 12em;
    -o-column-width: 12em;
    -webkit-column-width: 12em;
    column-width: 12em;
}

div p {
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}

JS Fiddle 演示，仅在 Chromium 22/Ubuntu 12.10 上测试。

该column-break-inside: avoid规则（以及以供应商为前缀的等价物）有效地指示浏览器不要将p元素拆分为两列或更多列；有效地丢弃相同高度的列，以便将每个元素严格定位在一列内，尽管在某些情况下，这也允许将多个p元素放置在一列内。

如果您严格希望p每列强制执行一个，那么您可以使用column-break-before: always;orcolumn-break-after: always;规则。

参考：

• CSS 多列布局模块，位于 W3C。