columns
CSS 属性 columns
用来设置元素的列宽和列数。
尝试一下
它是一个简写属性,可在单个方便的声明中设置 column-width
和 column-count
属性。与所有简写属性一样,任何省略的子值都将设置为其初始值。
语法
css
/* Column width */
columns: 18em;
/* Column count */
columns: auto;
columns: 2;
/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* Global values */
columns: inherit;
columns: initial;
columns: unset;
columns
属性可以按任何顺序指定为下面列出的一个或两个值。
取值
<'column-width'>
-
理想的列宽,定义为
<length>
或auto
关键字。实际宽度可以更宽或更窄以适合可用空间。Seecolumn-width
。 <'column-count'>
-
元素内容应分成的理想列数,定义为
<integer>
或auto
关键字。如果此值和列的宽度都不是auto
,则它仅指示允许的最大列数。请参阅column-count
。
正式语法
columns =
<'column-width'> ||
<'column-count'>
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<length-percentage> =
<length> |
<percentage>
例子
HTML
html
<p class="content-box">
This is a bunch of text split into three columns using the CSS `columns`
property. The text is equally distributed over the columns.
</p>
CSS
css
.content-box {
columns: 3 auto;
}
Result
规范
Specification |
---|
CSS Multi-column Layout Module Level 1 # columns |
初始值 | 该简写所对应的每个属性:
|
---|---|
适用元素 | Block containers except table wrapper boxes |
是否是继承属性 | 否 |
计算值 | 该简写所对应的每个属性:
|
动画类型 | 该简写所对应的每个属性: |
浏览器兼容性
BCD tables only load in the browser