column-fill CSS 属性可控制元素内容分成列时的平衡方式。

{{InteractiveExample("CSS Demo: column-fill")}}

```css interactive-example-choice column-fill: auto;


```css interactive-example-choice
column-fill: balance;

```html interactive-example

London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. 


```css interactive-example
#example-element {
  width: 100%;
  height: 90%;
  columns: 3;
  text-align: left;
}

语法

/* 关键字值 */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

/* 全局值 */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;

column-fill 属性可指定为下列关键字值之一。初始值为 balance，这样内容就会在各列之间中保持平衡。

取值

  • auto
    • : 按顺序填充列。内容只占用其所需的空间，可能导致某些列保持空白。
  • balance
    • : 内容平均分配到各列。在片段式上下文中，如 CSS 分页媒体，只有最后一个片段是平衡的。因此，在分页媒体中，只有最后一页是平衡的。
  • balance-all {{Experimental_Inline}}
    • : 内容平均分配到各列。在片段式上下文中，如 CSS 分页媒体，所有片段都是平衡的。

形式定义

{{cssinfo}}

形式语法

{{csssyntax}}

示例

平衡列内容

HTML

<p class="fill-auto">
  本段一次填满一列。由于所有文字都可以填入第一列，所以其他列是空的。
</p>

<p class="fill-balance">
  这一段试图平衡各列的内容量，使用 CSS <code>balance</code>
  属性来平衡各列。
</p>

CSS

p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}

结果

{{EmbedLiveSample('平衡列内容', 'auto', 320)}}