多列

优质

小牛编辑

125浏览

2023-12-01

CSS3 多列再需要设计多个布局时是非常有用的。比如，报纸布局。

主要属性如下：

column-count ：指定元素的列数
column-rule ：设置列之间的宽度，样式和颜色
column-gap ：指定的列之间的差距

例子：

.newspaper {
    column-count: 3;
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */

    column-gap: 40px;
    -moz-column-gap: 40px; /* Firefox */
    -webkit-column-gap: 40px; /* Safari and Chrome */

    column-rule: 4px outset #ff00ff;
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    -webkit-column-rule: 4px outset #ff00ff; /* Safari and Chrome */
}

属性

属性	说明	CSS
column-count	指定元素应分为的列数	3
column-fill	指定如何填充列	3
column-gap	指定列之间差距	3
column-rule	一个用于设置所有列规则的简写属性	3
column-rule-color	指定的列之间颜色规则	3
column-rule-style	指定的列之间的样式规则	3
column-rule-width	指定的列之间的宽度规则	3
column-span	指定一个元素应该横跨多少列	3
column-width	指定列的宽度	3
columns	缩写属性设置列宽和列数	3

源码

本文中所用例子源码参见 https://github.com/waylau/css3-tutorial 中 samples 目录下的 multiple_columns.html