column-span

版本：CSS3

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

示例

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

column-span: inherit;

浏览器支持

语法

取值：

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

例子

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

 
my very special columns
 
this is a bunch of text split into three columns
     using the css `columns` property. the text
     is equally distributed over the columns.
//CSS
article {
  columns: 3;
}

h2 {
  column-span: all;
  -webkit-column-span:all;/*safari and chrome*/
}

.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*/
} 
效果：
第一列文字部分：内容内容内容内容内容内容
第二列文字部分：内容内容内容内容内容内容
第三列文字部分：内容内容内容内容内容内容
第四列文字部分：内容内容内容内容内容内容
第五列文字部分：内容内容内容内容内容内容

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com