column-span

版本： CSS3

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

示例

column-span: none;
column-span: all;

column-span: inherit;

浏览器支持

IE10以上版本的浏览器都支持 column-span

语法

column-span : none | all

取值：

• none ：元素不跨多个列。
• all ：元素横跨所有列。元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的块格式上下文。

例子

下例中的 h2 元素横跨 article 元素中的各列

<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;
  -webkit-column-span:all;/*safari and chrome*/
}

<style>
.content-box {
	width:20%;
	padding:20px;
	border: 10px solid #000000;
	column-count:3;
	-moz-column-count:3;/*firefox*/
	-webkit-column-count:3;/*safari and chrome*/
}
.content-box .items
{
	border:1px solid #ff6633;
	padding:10px;
	height:100%;
	overflow:hidden;
}
.content-box .column-span
{
	border:1px solid #0000ff;
	column-span:all;
	-moz-column-span:all;/*firefox*/
	-webkit-column-span:all;/*safari and chrome*/
}
</style>

<h3>效果：</h3>
<div class="content-box">
	<p class="items">第一列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第二列文字部分：内容内容内容内容内容内容</p>
	<p class="items column-span">第三列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第四列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第五列文字部分：内容内容内容内容内容内容</p>
</div>