column-fill

版本：CSS3

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

示例

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

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

浏览器支持

语法

取值：

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

例子

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

.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;
} 
效果：
第一列文字部分：内容内容内容内容内容内容内容一部分高出来一些
第二列文字部分：内容内容内容内容内容内容二部分
第三列文字部分：内容内容内容内容内容内容三部分略微高
第四列文字部分：内容内容内容内容内容
第五列文字部分：内容内容内容内容内容内容

.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;
} 
效果：
第一列文字部分：内容内容内容内容内容内容内容一部分高出来一些
第二列文字部分：内容内容内容内容内容内容二部分
第三列文字部分：内容内容内容内容内容内容三部分略微高
第四列文字部分：内容内容内容内容内容
第五列文字部分：内容内容内容内容内容内容

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