CSS列Vs.浮动柱 [英] CSS columns Vs. floating columns

问题描述

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

我知道CSS3列很适合在正确的地方打破魔法，以创建一个均匀的分割/高度，但是段落从上一列的底部开始，取决于长度

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

解决方案

假设 p div 元素，那么以下内容应该可以工作：

  div {
 -moz-column-width：12em; / *或任何你喜欢的宽度... * / 
 -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 demo ，仅在Chromium 22 / Ubuntu 12.10上测试。

-inside：avoid 规则（和它的供应商前缀等同物）有效地指示浏览器不打破 p 元素跨两个或更多个列;有效地舍弃相同高度的列，以便将每个元素完全定位在一个列内，尽管在某些情况下，这也允许多个 p 元素

如果您严格要对每列强制执行一个 p ，那么您可以使用 column-break-before：always; 或 column-break-after：always; b
$ b

参考文献：

• CSS多列布局模块，在W3C 。

On a HTML page, I have three paragraphs of text (each in a p tag), and I want them as columns next to each other.

I know CSS3 columns are great for breaking magically at the right place, to create an even division/height, but then the paragraphs start at the bottom of the previous column depending on the length of the column, resulting in ugly layout.

Is using CSS3 columns outright wrong for this situation? Should I use div tags and float instead? Or what is the best approach?

解决方案

Assuming that the p elements are wrapped by a parent div element, then the the following should work:

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 demo, tested only on Chromium 22/Ubuntu 12.10.

The column-break-inside: avoid rule (and it's vendor-prefixed equivalents) effectively instruct the browser to not break the p elements across two, or more, columns; effectively discarding same-height columns in order to strictly position each element entirely within one column, though under some circumstances this also allows multiple p elements to be placed inside one column.

If you strictly want to enforce one p per column, then you could use the column-break-before: always; or column-break-after: always; rules instead.

References:

• CSS Multi-Column Layout Module, at the W3C.

这篇关于CSS列Vs.浮动柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！