CSS column-width 属性值说明
| 值 | 说明 |
|---|---|
| auto | 列的宽度由浏览器指定。这是默认值。 |
| length | 列的宽度由长度指定。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
column-width 属性定义列的宽度。
列数应该是通过元素显示所有内容所需的最小数量。
column-width 属性是 CSS3 属性之一。
它有两个值：auto或者长度。
“Auto”是 column-width 属性的默认值。
“长度”以 px、em 和 ch 为单位指定列的宽度。
column-width 属性是灵活的。
如果无法容纳指定宽度的至少两列，则这些列将合并为一列。
如果框的宽度小于指定值，则单列的宽度将小于指定的列宽。
使用此属性，我们还可以为不同的屏幕尺寸创建响应式设计。
添加了一些属性扩展，例如 -webkit- 适用于 Safari、Google Chrome 和 Opera（较新版本），-moz- 适用于 Firefox，-o- 适用于旧版本的 Opera 等。
| 初始值 | auto |
|---|---|
| 应用于 | 除表外的块容器。 |
| 继承 | 无效 |
| 可动画的 | 边框和宽度可设置动画。 |
| 版本 | CSS3 |
| DOM 语法 | object.style.columnRuleWidth=“5px”； |
语法
column-width: auto | length | initial | inherit;
列宽属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-column-width: 80px;
/* Chrome, Safari, Opera */
-moz-column-width: 80px;
/* Firefox */
column-width: 80px;
}
</style>
</head>
<body>
<h1>Column-width 属性示例</h1>
<p>将列的宽度设置为 80px.</p>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
具有“auto”值的列宽属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-column-width: auto; /* Chrome, Safari, Opera */
-moz-column-width: auto; /* Firefox */
column-width: auto;
}
</style>
</head>
<body>
<h1>Column-width 属性示例</h1>
<p>将列的宽度设置为auto</p>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
日期：2020-06-02 22:14:23 来源：oir作者：oir