概述
CSS 属性column-span
的值被设置为all
时,可以让一个元素跨越所有的列。一个跨越多列的元素被称为spanning element。
初始值 | none |
---|---|
适用元素 | in-flow block-level elements |
是否是继承属性 | 否 |
适用媒体 | visual |
计算值 | as specified |
Animation type | discrete |
正规顺序 | per grammar |
语法
Formal syntax: none | all
column-span: none; column-span: all; column-span: inherit;
取值
none
- 元素不跨多个列。
all
- 元素横跨所有列。元素出现之前,出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的块格式上下文。
例子
下例中的 h2 元素横跨 article 元素中的各列
HTML
<article> <h2>My Very Special Columns</h2> <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p> </article>
CSS
article { columns: 3; } h2 { column-span: all; }
Result
规范
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module column-width |
Working Draft |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!