Posted on | by liu
CSS 段落分栏可以帮助大家将长篇内容分成多个栏目来呈现，让页面更加美观、易读。在 CSS3 中，使用新的属性 column-count 可以实现简单的段落分栏功能。
让大家来看一下如何使用 CSS3 实现段落分栏：
首先，在 HTML 中使用 p 标签来创建段落。在 CSS 中，使用 column-count 属性来定义栏数，如下所示：
p {
column-count: 2;
}这个代码片段告诉浏览器，将所有的段落分成两栏，并根据需要添加必要的分隔符。
大家还可以使用 column-gap 属性来定义两个栏目之间的间距，如下所示：
p {
column-count: 2;
column-gap: 20px;
}这个代码片段告诉浏览器，在两个栏目之间留出 20px 的间距。
如果希望第一行也跨越两个栏目，可以使用 column-span 属性，如下所示：
p:nth-child(1) {
column-span: all;
}这个代码片段告诉浏览器，将第一个段落的第一行扩展到所有的栏目中。
最后，使用浏览器预览效果。你可以看到，所有的段落都被分成了两栏，并使用 column-gap 属性设置了间距。
总的来说，使用 CSS 实现段落分栏是非常方便的。只需要使用 column-count、column-gap 和 column-span 等属性即可轻松实现。让大家来尝试一下吧！