关于如何使用一些简单的CSS属性自定义网站或Web应用程序上的列的教程。请继续阅读以开始使用！
自从杂志版面设计出现以来，文本分页选项并不是最受欢迎的文本选项。就像在印刷设计中一样，网页设计中也有一些列。使用它的最好和最清晰的方式是CSS中的 列选项。
这是无聊的，内容和设计明智的，文本内容将扩展到整个网页，所以这是罕见的。
因此，网络上的文字内容被组织成更小的宽度元素，因此，不需要列。尽管如此，我上个星期需要一个设计方面的专栏，这是完全合理的（但左对齐）。
链接到列属性的属性是：
-
column-count - 指定一个元素应该分成的列数。
-
column-width - 指定列的宽度。
-
column-gap - 指定列之间的差距
-
列规则 - 设置列之间的规则（这是设置规则宽度，规则颜色和规则样式的简写属性）。
-
column-span - 指定元素应该跨越多少个列。Internet Explorer 9（及更早版本）和Firefox不支持列跨度
-
列填充 - 指定如何填充列（自动或余额）。
仅列属性将接受列数，列宽或两个属性。
这个例子表示将内容分割成一个具有定义宽度的列，并在它们之间有一个定义的间隔。
<style>
div{
-webkit-column-width: 300px; /* Chrome, Safari, Opera */
-moz-column-width: 300px; /* Firefox */
column-width: 300px;
-webkit-column-gap: 150px; /* Chrome, Safari, Opera */
-moz-column-gap: 150px; /* Firefox */
column-gap: 150px;
}
</style>
这个例子表示将内容交错分成3列，并在它们之间定义一条规则。
<style>
div{
-webkit-columns: 3; /* Chrome, Safari, Opera */
-moz-columns: 3; /* Firefox */
columns: 3;
-webkit-column-rule: 1px solid #dbdbdb; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid #dbdbdb; /* Firefox */
column-rule: 1px solid #dbdbdb;
}
</style>
最后一个例子表示列和元素中的内容，其中包括所有列的宽度。
<style>
div{
-webkit-columns: 3; /* Chrome, Safari, Opera */
-moz-columns: 3; /* Firefox */
columns: 3;
}
h1{
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
</style>
我相信这就是关于CSS中列属性的一切。希望能帮助到你！
,
