column-span

概述

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

初始值none
适用元素in-flow block-level elements
是否是继承属性
计算值as specified
Animation typediscrete

语法

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! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit (en-US) 未实现 10 11.1+ (Yes)-webkit (en-US)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)-webkit (en-US) (Yes)-webkit (en-US) 未实现 ? 11.1+ (Yes)-webkit (en-US)