column-span

概述

CSS 属性column-span 的值被设置为all时，可以让一个元素跨越所有的列。一个跨越多列的元素被称为spanning element。

语法

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

规范

浏览器兼容性

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!