发布日期:2015-11-09 16:25 来源: 标签: 网页技术 CSS3教程 CSS3多列 css3多列属性
本章我们主要学习如何使用CSS3创建多个列?CSS3常用多列属性有哪些?下面我们就做一下具体讲解,希望大家多多支持中国站长网络学院。

CSS3 多列

通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!

在本章中,您将学习如下多列属性:

  • column-count
  • column-gap
  • column-rule

浏览器支持


Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

注意: Internet Explorer 9 以及更早的版本不支持多列属性。


CSS3创建多列

column-count属性指定元素的列数应分为:

OperaSafariChromeFirefoxInternet Explorer

实例

划分成三列的div元素的文本:

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
运行效果:


CSS3的指定列之间的差距

column-gap属性指定的列之间的差距:

OperaSafariChromeFirefoxInternet Explorer

实例

指定列之间40个像素差距:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
运行效果:


CSS3列规则

column-rule属性设置列之间的宽度,样式和颜色。

OperaSafariChromeFirefoxInternet Explorer

实例

指定列之间的宽度,样式和颜色的规则:

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
运行效果:


新多列属性


相关评论

专题信息
    CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,也就是层叠样式表。层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。CSS3是CSS的升级版,本教程会一起介绍。