系统、网站、API站点，简单高效开发

CSS 教程

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class CSS 创建 CSS 背景 CSS 文本格式文本格式 CSS 字体 CSS 链接 CSS 列表 CSS 表格 CSS 盒子模型 CSS 边框 CSS 轮廓（outline） CSS margin(外边距) CSS padding（填充） CSS 分组 和 嵌套 选择器 CSS 尺寸 (Dimension) CSS Display(显示) 与 Visibility（可见性） CSS Position(定位) CSS 布局 - Overflow CSS Float(浮动) CSS 布局 - 水平 & 垂直对齐 CSS 伪类(Pseudo-classes) CSS 伪元素 CSS 导航栏 CSS 图片廊 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性 选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS !important 规则 你已经学习了CSS,下一步学习什么呢? CSS 实例

CSS3 教程

CSS3 教程 CSS3 简介 CSS3 边框 CSS3 背景 CSS3 渐变（Gradients） CSS3 文本效果 CSS3 字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 多列 CSS3 用户界面 CSS 图片 CSS 按钮 CSS 分页实例 CSS3 框大小 CSS3 多媒体查询 CSS3 多媒体查询实例

CSS 响应式设计

响应式 Web 设计 - Viewport 响应式 Web 设计 - 网格视图 响应式 Web 设计 - 媒体查询 响应式 Web 设计 - 图片 响应式 Web 设计 - 视频(Video) 响应式 Web 设计 - 框架

CSS 参考手册

CSS 参考手册 CSS 选择器 CSS 听觉参考手册 CSS Web安全字体组合 CSS 动画 CSS 单位 CSS 颜色 CSS 合法颜色值 CSS 颜色名称 CSS 颜色十六进制值

CSS3 多列

CSS3 多列

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

菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。

浏览器支持

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

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

属性
column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width 4.0 -webkit- 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 列：

实例

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

CSS3 多列中列与列间的间隙

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

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

实例

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

CSS3 列边框

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

实例

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

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

实例

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

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

实例

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

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

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

实例

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

指定元素跨越多少列

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

实例

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

指定列的宽度

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

实例

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 的简写属性。

备案号：闽ICP备20003806号     厦门市湖里区陈朝能网络技术工作室