• 多列
    • 属性
    • 源码

    多列

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

    主要属性如下：

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

    例子：

    1. .newspaper {
    2.     column-count: 3;
    3.     -moz-column-count: 3; /* Firefox */
    4.     -webkit-column-count: 3; /* Safari and Chrome */
    6.     column-gap: 40px;
    7.     -moz-column-gap: 40px; /* Firefox */
    8.     -webkit-column-gap: 40px; /* Safari and Chrome */
    10.     column-rule: 4px outset #ff00ff;
    11.     -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    12.     -webkit-column-rule: 4px outset #ff00ff; /* Safari and Chrome */
    13. }

    属性

    属性 说明 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