CSS3 可以将文本内容设计成像报纸一样的多列布局。
一些最常用的多列属性，如下所示-
| Sr.No. | Value & Remark |
|---|---|
| 1 |
column-count 指定元素应该被分割的列数。 |
| 2 |
column-fill 指定如何填充列 |
| 3 |
column-gap 指定列与列之间的间隙 |
| 4 |
column-rule 所有 column-rule-* 属性的简写 |
| 5 |
rule-color 用于指定列规则颜色。 |
| 6 |
rule-style 指定两列间边框的样式 |
| 7 |
rule-width 指定两列间边框的厚度 |
| 8 |
column-span 指定元素要跨越多少列 |
CSS3多列示例
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class="multi">
Learnfk Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh Learnfk
to our repository which now proudly flaunts a wealth of Learnfk and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>
它将产生以下输出-
假设，如果用户希望将文本制成没有行的新纸，无涯教程可以通过删除样式语法来做到这一点，如下所示-
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
它将产生以下输出-
参考链接
https://www.learnfk.com/css/css3-multi-columns.html
标签：CSS3,count,style,40px,column,无涯,rule,gap,多列 From： https://blog.51cto.com/u_14033984/9401046