关于如何使用一些简单的CSS属性自定义网站或Web应用程序上的列的教程。请继续阅读以开始使用！
自从杂志版面设计出现以来，文本分页选项并不是最受欢迎的文本选项。就像在印刷设计中一样，网页设计中也有一些列。使用它的最好和最清晰的方式是CSS中的 列选项。
这是无聊的，内容和设计明智的，文本内容将扩展到整个网页，所以这是罕见的。
因此，网络上的文字内容被组织成更小的宽度元素，因此，不需要列。尽管如此，我上个星期需要一个设计方面的专栏，这是完全合理的（但左对齐）。
链接到列属性的属性是：
column-count - 指定一个元素应该分成的列数。
column-width - 指定列的宽度。
column-gap - 指定列之间的差距
列规则 - 设置列之间的规则（这是设置规则宽度，规则颜色和规则样式的简写属性）。
column-span - 指定元素应该跨越多少个列。Internet Explorer 9（及更早版本）和Firefox不支持列跨度
列填充 - 指定如何填充列（自动或余额）。
仅列属性将接受列数，列宽或两个属性。
让我稍微解释一下这些属性。
column-width属性为列指定建议的最佳宽度。如果定义了列数，则列宽值将被覆盖。
列填充属性仅在Firefox中可用。具有列填充余额的内容将自动在高度受限的多列布局中平衡内容。其他浏览器将始终在给定高度限制时按顺序填充列。如果你想通过所有浏览器设置相同的行为column-fill: auto。
可以用这种方式编辑的内容必须位于以下元素之一：<p>，<div>，<h>，<ul>和<ol>。
如果未定义列的高度，则分成列的内容定义列的高度。
例子
这个例子表示将内容分成两列。
<style>
div{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
</style>
这个例子表示将内容分割成一个具有定义宽度的列，并在它们之间有一个定义的间隔。
<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中列属性的一切。希望能帮助到你！