CSS3 多列
CSS3 多列
通过 CSS3布局 - 样！
：
- column-count
- column-gap
- column-rule
| 属性 | |||||
|---|---|---|---|---|---|
| column-count | |||||
| column-gap | |||||
| column-rule | |||||
Internet Explorer 10 和 Opera 性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9
CSS3 创建多列
column-count
实例
把 div 列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
CSS3 的间隔
column-gap ：
实例
40 ：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
CSS3 列规则
column-rule 色规则。
实例
则：
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
性
：
| 属性 | 描述 | CSS |
|---|---|---|
| column-count | 列数。 | 3 |
| column-fill | 充列。 | 3 |
| column-gap | 的间隔。 | 3 |
| column-rule | 设置所有 column-rule-* 属性。 | 3 |
| column-rule-color | 。 | 3 |
| column-rule-style | 。 | 3 |
| column-rule-width | 。 | 3 |
| column-span | 数。 | 3 |
| column-width | 度。 | 3 |
| columns | 规定设置 column-width 和 column-count 。 | 3 |