CSS3 多列，华为架构师深入讲解前端开发
CSS3 的多列特性可以让你轻松地创建自动分列的文本布局。以下是一个简单的例子，演示如何使用 CSS3 的多列属性：
.multi-column {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;
}
<div class="multi-column">
这里是一些需要分列显示的文本内容，比如说一篇文章或者是其他的可以自动换行的文本。这个特性可以让你创建出类似报纸那样的多列布局，非常适合阅读内容较多的页面。
</div>在这个例子中，.multi-column 类定义了文本应该分成3列，并且列与列之间的间隔是20像素。这个类可以被任何元素使用，只要你想要应用这种多列的布局。
评论已关闭