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
下一节:CSS 是 Cascading Style Sheet(层叠样式表)的缩写。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。