CSS3中的多列布局

CSS3 多列布局

使用 column 属性将文本内容设计成像报纸一样的多列布局

1.CSS3 创建多列

column-count 属性指定了需要分割的列数。

column-count: number;

css代码如下

<style>
        .box{
            width: 500px;
            height: auto;
            column-count: 2;
            border: 1px solid #999;
        }
    </style>

2.CSS3 多列中列与列间的间隙

column-gap 属性指定了列与列间的间隙。

column-gap: 40px;

css代码如下：

<style>
		.box{
            width: 500px;
            height: auto;
            column-count: 2;
            border: 1px solid #999;
            column-gap: 40px;
        	}
</style>

3.CSS3 列边框

column-rule 属性指定了列与列间的边框样式

复合属性
column-rule: width,style,color;

column-rule-color 属性指定了两列的边框颜色：
column-rule-width 属性指定了两列的边框厚度:
column-rule-style 属性指定了列与列间的边框样式：

css代码如下：

<style>
        .box {
            width: 500px;
            height: auto;
            column-count: 2;
            border: 1px solid #999;
            column-gap: 40px;

			/*设置多列元素中间的边线*/
            column-rule: 1px solid #000;
        }
</style>

4.column-span 属性

column-span属性指定某个元素应该跨越多少列

1 元素应跨越一列
all 该元素应该跨越所有列