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 and Chrome */
column-count:3;
}
实例演示

CSS3的指定列之间的差距

column-gap属性指定的列之间的差距: 指定列之间40个像素差距:
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
实例演示

CSS3列规则

column-rule属性设置列之间的宽度,样式和颜色。 指定列之间的宽度,样式和颜色的规则:
div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
实例演示

新多列属性

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

我们需要您的支持

支付宝捐助

捐助记录

  • 操** 5.00 2019-7-29
  • 王** 23.33 2019-7-3
  • 吴** 10.00 2019-7-28
  • 竺** 0.10 2019-7-21
  • 童** 5.00 2019-7-22
  • 高** 10.00 2019-7-24
  • 孙** 10.00 2019-7-14
  • 刘** 1.00 2019-7-5
  • 王** 10.00 2019-7-27
  • 陈** 20.00 2019-7-17
  • 潘** 100.00 2019-7-25
  • 庾** 1.00 2019-7-11
  • 于** 50.00 2019-7-17
  • 李** 10.00 2019-7-2
  • 钟** 20.00 2019-7-7
  • 毛** 1.00 2019-7-24
  • 许** 10.00 2019-7-11
  • 吕** 0.80 2019-7-12
  • 爱心会员 0.29 2019-7-28
  • 郭** 10.00 2019-7-12
  • 贾** 20.00 2019-7-2
  • 李** 20.00 2019-7-23
  • 张** 1.00 2019-7-5
  • 陈** 10.00 2019-7-5
  • 黄** 20.00 2019-7-1
  • 时** 0.10 2019-7-11
  • 魏** 10.00 2019-7-6
  • 李** 0.70 2019-7-15
  • 冯** 0.30 2019-7-14
  • 石** 10.00 2019-7-26
  • 陈** 20.00 2019-7-26
  • 何** 20.00 2019-7-13
  • 成** 0.10 2019-7-28
  • 赵** 10.00 2019-7-23
  • 刘** 5.00 2019-7-3

扫一扫关注

Web前端中国