column-fill

版本： CSS3

column-fill CSS属性控制如何将内容分区为列。内容要么是平衡的，这意味着所有列中的内容将具有相同的高度，要么在使用auto时，只占用内容所需的空间。

示例

column-fill: auto;
column-fill: balance;

/* global values */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

浏览器支持

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

语法

column-fill : auto | balance

取值：

• auto ：指示按顺序填充列。
• balance ：指示内容在列之间平均分配。

例子

.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}

<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*/
	column-fill: balance;
	-moz-column-fill: balance;/*firefox*/
	-webkit-column-fill: balance;/*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>

<style>
.content-box2 {
	width:20%;
	padding:20px;
	border: 10px solid #000000;
	column-count:3;
	-moz-column-count:3;/*firefox*/
	-webkit-column-count:3;/*safari and chrome*/
	column-fill: auto;
	-moz-column-fill: auto;/*firefox*/
	-webkit-column-fill: auto;/*safari and chrome*/
}
.content-box2 .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>