W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS3 多列



CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例:

2000年,有幸目睹了一位当时国内最牛程序员的一次编程操作,从此彻底颠覆了我的想法。先说说牛人的业绩,一个工作日,基本没加班,完成一个复杂 C/S软件的服务器端,用统计小工具数数代码,三万多行。这个软件经过简单的测试,第二天就上线实际运行了,每天数千人访问,没出过大问题。再说开发过程,开发环境是VS6.0,牛人很少动鼠标,大概嫌耽误时间,各种快捷键运用,让人眼花缭乱,程序基本上不是写出来的,而是粘贴过来,重新排列组合一番,再敲上几个语句补充修正一下,就算大功告成。搞定一个程序块的时间,基本上跟一般人写一条语句的时间差不多。整个工作过程中,看不出明显用于思考的时间,只要不离开座位,键盘的声音就一直连续不停。我想牛人之所以牛,关键就在这里,像运用语句一样运用语句块,程序不是写出来的,而是装配起来的,就产生了如同手工组装劳斯莱斯与模块化装配丰田之间的巨大生产率差异。我那时和牛人不在同一层办公,平时很少机会接触,又一次在楼下食堂吃饭正好坐邻桌,听到牛人讲起一件往事,牛人多年来,不论在哪里工作,都要带一块自己的硬盘,里面有几GB以往做的程序–他的 code base ,有一次这个硬盘突然卡壳了,牛人就跟老婆说,咱们准备回老家改行干别的吧,结果没过太久,那个硬盘自己又恢复了,所以牛人终于没有回老家去。 可见,如果没有 code base ,牛人立刻就不牛了。


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性
column-count 4.0 -webkit- 12.0 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 4.0 -webkit- 12.0 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 4.0 -webkit- 12.0 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 4.0 -webkit- 12.0 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 4.0 -webkit- 12.0 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 4.0 -webkit- 12.0 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width 4.0 -webkit- 12.0 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1

CSS3 多列属性

本章节我们将学习以下几个 CSS3 的多列属性:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

CSS3 创建多列

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

以下实例将 <div> 元素中的文本分为 3 列:

Example

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
尝试一下 >>

CSS3 多列中列与列间的间隙

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

以下实例指定了列与列间的间隙为 40 像素:

Example

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
尝试一下 >>

CSS3 列边框

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

Example

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
尝试一下 >>

column-rule-width属性指定了两列的边框厚度:

Example

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}
尝试一下 >>

column-rule-color属性指定了两列的边框颜色:

Example

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}
尝试一下 >>

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

以下实例设置了列直接的边框的厚度,样式及颜色:

Example

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
尝试一下 >>

指定元素跨越多少列

以下实例指定 <h2> 元素跨越所有列:

Example

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
尝试一下 >>

指定列的宽度

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

Example

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}
尝试一下 >>

CSS3 多列属性

下表列出了所有 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 的简写