CSS3--多列

来源：互联网发布：vb调用大漠编辑：程序博客网时间：2024/05/17 07:34

CSS3 可以将文本内容设计成像报纸一样的多列布局。

1. CSS3 创建多列
column-count 属性指定了需要分割的列数。

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

2. CSS3 多列中列与列间的间隙
column-gap 属性指定了列与列间的间隙。

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

3. CSS3 列边框
（1）column-rule-style 属性：指定了列与列间的边框样式。

.newspaper{column-count:3;column-gap:40px;column-rule-style:dotted;/* Firefox */-moz-column-count:3;-moz-column-gap:40px;-moz-column-rule-style:dotted;/* Safari and Chrome */-webkit-column-count:3;-webkit-column-gap:40px;-webkit-column-rule-style:dotted;}

（2）column-rule-width 属性：指定了两列的边框厚度。

（3）column-rule-color 属性：指定了两列的边框颜色。

注意：column-rule 属性是 column-rule-* 所有属性的简写。

4. 指定元素跨越多少列

/* 指定 <h2> 元素跨越所有列 */h2 {-webkit-column-span: all; /* Chrome, Safari, Opera */column-span: all;}

5. 指定列的宽度
column-width 属性指定了列的宽度.

div {    -webkit-column-width: 100px; /* Chrome, Safari, Opera */    column-width: 100px;}

6. CSS3 多列属性
属性描述column-count指定元素应该被分割的列数。column-fill指定如何填充列column-gap指定列与列之间的间隙column-rule所有 column-rule-* 属性的简写column-rule-color指定两列间边框的颜色column-rule-style指定两列间边框的样式column-rule-width指定两列间边框的厚度column-span指定元素要跨越多少列column-width指定列的宽度columns设置 column-width 和 column-count 的简写

0 0