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 该元素应该跨越所有列