column-count

版本： CSS3

column-count CSS属性将元素的内容拆分为指定的列数。

示例

column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;

浏览器支持

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

语法

column-count : auto | <integer>

取值

• auto ：用来表示列的数量由其他CSS属性指定，例如 column-width .
• <integer> ：用来描述元素内容被划分的理想列数。假如 column-width 也被设置为非零值，此参数仅表示所允许的最大列数.

例子

<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;
}
</style>

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