目录

CSS column-width 属性


示例

指定列宽应为 100px:

div {
  column-width: 100px;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。


定义和用法

这个column-width属性指定列宽。

列数将是显示元素中所有内容所需的最小列数。

column-width是一个灵活的属性。考虑到column-width作为一个最小宽度建议对于浏览器。一旦浏览器无法以您指定的宽度容纳至少两列,那么这些列将停止并落入单个列中。

展示演示❯

默认值: 汽车
遗传:
可动画: 是的。阅读可动画的尝试一下
版本: CSS3
JavaScript 语法: 对象.style.columnWidth="100px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit- 或 -moz- 的数字指定使用前缀的第一个版本。

Property
column-width 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1


CSS 语法

column-width: auto| length|initial|inherit;

属性值

Value Description Demo
auto Default value. The column width will be determined by the browser Demo ❯
length A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

将 <div> 元素中的文本分为三列:

div {
  column-count: 3;
}
亲自试一试 »

示例

指定列之间的间隙为 40 像素:

div {
  column-gap: 40px;
}
亲自试一试 »

示例

指定列之间规则的宽度、样式和颜色:

div {
  column-rule: 4px double #ff00ff;
}
亲自试一试 »

相关页面

CSS教程:CSS 多列

HTML DOM 参考:列宽度属性