CSS column-fill属性

• 

  定义和用法

  column-fill属性指定如何填充列，平衡与否。

  提示：如果向多列元素添加高度，则可以控制内容填充列的方式。内容可以按顺序平衡或填充。

  特征	说明
  默认值	balance
  继承	没有
  动画	没有CSS动画参考
  CSS版本	CSS3
  JavaScript语法	object.style.columnFill="auto"尝试一下

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  属性	Internet Explorer	Chrome	FireFox	Safari	Opera
  属性名称
  column-fill	10.0	50.0	52.0 13.0 -moz-	10.0 7.0 -webkit-	37.0

• 

  CSS语法

  column-fill: balance|auto|initial|inherit;
• 

  实例

  指定填充列的方式：

  .newspaper1 {
   -moz-column-fill: auto; /* Firefox */
   column-fill: auto;
  }
  
  .newspaper2 {
   -moz-column-fill: balance; /* Firefox */
   column-fill: balance;
  }

  尝试一下
• 

  属性值

  属性值	描述
  balance	默认值。 使用大约相同数量的内容填充每列，但不允许列高于高度（因此，列可能比浏览器水平均匀分布内容时的列更短）
  auto	填充每列直到达到高度，并执行此操作直到内容耗尽（因此，此值不一定会填满所有列，也不会均匀填充）
  initial	将此属性设置为其默认值。查看initial关键字
  inherit	从其父元素继承此属性。查看inherit关键字

• 

  相关页面

  HTML教程：HTML样式

  CSS教程：css多列