CSS column-span属性用于在多列布局中指定某个元素是否跨越所有的列。

CSS column-span属性有两个取值：all和none。如果某个元素的column-span属性的取值为all，那么这个元素就会占据一行中所有的列，如果设置为none则表示该元素值占据一列宽度。

下图是一个多列布局的示意图，其中虚线框中的标题元素和中间黄色背景的图片元素将column-span属性设置为all，它们多会占据3列的宽度。

注意：只有块级元素可以跨越多列。即display属性为block的元素才可以跨越多列。

官方语法

column-span: none | all
                            

参数：

• none：元素不跨越多列。
• all：元素跨越一行的所有列。在元素前面的内容会重新按指定的列数平均分配。

column-span属性的初始值为none。

应用范围

column-span属性可以应用在所有多列布局的元素上。

示例代码

例如有下面的多列布局HTML结构：

<div class="columns">
    <h2>标题</h2>
    <p>
        <!-- 内容1 -->
    </p>
    <img src="..." alt="...">
    <p>
        <!-- 内容2 -->
    </p>
</div>                              
                            

为.columns元素创建一个多列布局：

.columns {
    column-width: 300px;
    column-rule: 2px solid #ddd;
}                              
                            

如果想要使标题元素和图片元素跨越多列，可以为它们设置column-span属性：

h2 {
    column-span: all;
}

img.spanner {
    display:block;
    column-span: all; 
}                              
                            

在线演示

下面是一个使用column-span属性的在线示例：

浏览器支持

目前有Chrome，Safari，Opera 11.1+（需要添加-webkit-前缀），Internet Explorer 10+，Android 和 iOS支持column-span属性。Firefox浏览器不支持column-span属性。