试一试
columns: 2;
columns: 6rem auto;
columns: 12em;
columns: 3;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
#example-element {
min-width: 21rem;
text-align: left;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
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: revert;
columns: revert-layer;
columns: unset;
columns 属性可以指定为下面列出的一个或两个值，顺序不限。
值
<'column-width'>-
理想的列宽，定义为
<length>或关键字auto。实际宽度可能会更宽或更窄，以适应可用空间。请参阅column-width。 <'column-count'>-
元素内容应该流入的理想列数，定义为
<integer>或关键字auto。如果此值和列宽都不是auto，则它仅表示允许的最大列数。请参阅column-count。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 块容器，除了表格包装盒 |
| 继承性 | 否 |
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 作为简写中的每个属性
|
正式语法
columns =
[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<column-height> =
auto |
<length [0,∞]>
<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;
}
结果
规范
| 规范 |
|---|
| CSS Multi-column Layout Module Level 1 # columns |
浏览器兼容性
加载中…