English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
column-The fill CSS attribute specifies how the column length in multi-column elements is affected by the content flow. The content in multi-column layout is balanced, which means that the content in all columns will have the same height, or only occupy space when using the auto value, to meet the needs of the content.
The following table provides usage instructions and version history of this attribute, as well as the syntax of using this attribute in JavaScript scripts.
| Default value: | balance |
|---|---|
| Applies to: | Multi-column elements |
| Inheritance: | None |
| Animatable: | No Animation attribute. |
| Version: | CSS3new feature |
| JavaScript syntax: | object.style.columnFill="auto" |
The syntax of this attribute is as follows:
column-fill: auto | balance | initial | inherit
The following example demonstrates how to use column-fill attribute.
p {
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}Test and see‹/›The following table describes the value of this attribute.
| Value | Description |
|---|---|
| auto | Fill the columns sequentially so that the length of the columns can be different, depending on the values of other column attributes. |
| balance | Fill the columns in order to balance the column heights as much as possible according to the values of other column attributes. |
| initial | Set this property to its default value. |
| inherit | If specified, the associated element adopts its parent element column-The value of the fill attribute. |
column-Browser compatibility of the fill attribute, the numbers in the table below represent the minimum version number of the browser that supports this attribute; currently only Firefox browser supports this attribute.
|
Please refer to the following tutorials:CSS3Multi-column layout.
Related properties:column-width,column-gap,column-rule,column-rule-width,column-rule-style,column-rule-color,column-span,column-count,columns.