HTML | DOM 样式 columnFill 属性

介绍

columnFill 属性设置列的填充方式。它用于多列布局中，用于确定如何分配内容到多个列中。

columnFill 属性只有在 columnCount 属性设置为大于1的值时才有效。

语法

以下是 columnFill 属性的语法：

column-fill: auto|balance|inherit|initial|unset;

默认值为 balance。

| 值 | 描述 | |-----------|--------------------------------------------------------------| | auto | 允许用户代理自行选择列的填充方式。 | | balance | 填充所有列，使其高度相等 | | inherit | 规定应该从父元素继承 column-fill 属性的值。 | | initial | 设置该属性为它的默认值。 | | unset | 采用继承或初始值的值，具体取决于该属性是否继承对父元素设置的值。 |

实例

下面是使用 columnFill 属性的实例:

将一个框架设为两个列，并将 column-fill 属性设置为 balance。

div {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
}

总结

columnFill 属性主要用于多列布局中，用于确定如何分配内容到多个列中。常用的值包括 auto 和 balance。

值得注意的是，column-fill 属性只有在 column-count 属性设置为大于1的值时才有效。