column-count 属性指定划分元素内容的列数。
column-count 属性是 CSS3 属性之一。
它有两个值：auto 和 number。
“Auto”是该属性的默认值。
列数由其他属性决定，例如column-width。
“Number”值指定元素内容应连贯的列数。
| 初始值 | auto |
|---|---|
| 应用于 | 除表包装盒外的块容器。 |
| 继承 | 无效 |
| 可动画的 | 列数可以设置动画。 |
| 版本 | CSS3 |
| DOM 语法 | object.style.columnCount=“4”； |
语法
column-count: number | auto | initial | inherit;
column-count 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-column-count: auto;
/* Chrome, Safari, Opera */
-moz-column-count: auto;
/* Firefox */
column-count: 3;
}
</style>
</head>
<body>
<h2>Column-count 属性示例</h2>
<div>生活总是两难，再多执着，再多不肯，最终不得不学会接受。从哭着控诉，到笑着对待，到头来，不过是一场随遇而安。
</div>
</body>
</html>
列指定为 7 的 column-count 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-column-count: 7;
/* Chrome, Safari, Opera */
-moz-column-count: 7;
/* Firefox */
column-count: 7;
}
</style>
</head>
<body>
<h2>Column-count 属性示例</h2>
<div>生活总是两难，再多执着，再多不肯，最终不得不学会接受。从哭着控诉，到笑着对待，到头来，不过是一场随遇而安。
</div>
</body>
</html>
CSS column-count 属性值说明
| 值 | 说明 |
|---|---|
| auto | 列数由其他属性指定。这是此属性的默认值。 |
| number | 指定应写入元素内容的列数。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:22 来源：oir作者：oir