CSS3规范中的多列布局(或者叫分栏)已经于2009年12月17日被W3C作为预推荐标准(Candidate
Recommendation)进行发布。该模块的在
W3C上的地址为:http://www.w3.org/TR/css3-multicol/。W3C规范定义的实现多列布局的属性有:
属性名
可能的值
默认值
应用元素
break-after
|
auto | always | avoid | left | right | page | column | avoid-page | avoid-column
|
auto
|
块级元素
|
break-before
|
auto | always | avoid | left | right | page | column | avoid-page | avoid-column
|
auto
|
块级元素
|
break-inside
|
auto | avoid | avoid-page | avoid-column
|
auto
|
块级元素
|
column-count
|
<integer> | auto
|
auto
|
非替换的块级元素(table元素除外)、表格单元格、行内块元素
|
column-fill
|
auto | balance
|
balance
|
多列元素
|
column-gap
|
<length> | normal
|
normal
|
多列元素
|
column-rule
|
<column-rule-width> || <border-style> || [ <color> | transparent
]
|
同单个元素 |
多列元素
|
column-rule-color
|
<color>
|
color值
|
多列元素
|
column-rule-style
|
<‘border-style’>
|
none
|
多列元素
|
column-rule-width
|
<‘border-width’>
|
medium
|
多列元素
|
columns
|
<‘column-width’> || <‘column-count’>
|
同单个元素 |
非替换的块级元素(table元素除外)、表格单元格、行内块元素
|
column-span
|
1 | all
|
1
|
静态、非浮动元素
|
column-width
|
<length> | auto
|
auto
|
非替换的块级元素(table元素除外)、表格单元格、行内块元素
|
在我们经常阅读的报纸中,一般情况下一个版面被分成多个列进行排版,或者在一般的杂志中,一页被分成2列排版。在CSS3颁布之前,在HTML中实现这样
的功能是非常麻烦的。现在,CSS3规范中对多列布局进行了定义,使用CSS样式单就可以轻松搞定了。支持的浏览器目前有:Firefox、
Chrome、Safari等。目前,这些浏览器对该标准的支持采取还是扩展的方法,也就是采用-moz、-webkit等浏览器特有的属性,但是,这并
不影响对W3C标准的理解。
下面我就举一个简单的例子。下面例子中的div1这个元素,采用column-count属性将div显示的内容划分为2列显示,由于没有特别设置每列的
宽度,则列的宽度是自动平均分配的。div2这个div,设置列的宽度和列间距,另外还设置列与列之间的分割线的样式。注意:要查看div2的效果,则浏览器的窗口要宽一些。
如果使用Firefox 3.5、Google Chrome或者Safari4的浏览器,就可以看到上面的例子被显示了多列的布局。
分享到:
相关推荐
高效学习CSS布局之道:通过244个范例掌握网页样式与布局技术
DIVCSS网页布局实例:十步学会用CSS建站.pdf
使用CSS3多列布局属性.ppt
幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。 CSS代码 CSS3里的column系列属性提供了各种不同的功能,通过组合...
使用CSS3 圆角技术实现。 使用CSS3样式单词:border-radius 语法: div{border-radius:5px} 对图片设置圆角样式: .abc img{border-radius:5px} 设置class=”abc”对象图片四个角圆角为5px 三、CSS...
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
CSS布局常用思路方法 CSS常用布局例子 CSS布局高级窍门技巧
CSS布局之道供新手下载学习CSS的各种技巧,欢迎新手使用!
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE ...第八天:CSS布局入门 第九天:第一个CSS布局实例 第十天:自适应高度 十一天:不用表格的菜单 十二天:校验及常见的错误
DIVCSS网页布局实例:十步学会用CSS建站[整理].pdf
DIV+CSS布局:CSS浮动float属性详解 不解释
本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计。具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、...
css css布局 css参考 css介绍 最全的css布局 css css布局 css参考 css介绍 最全的css布局 css css布局 css参考 css介绍 最全的css布局
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
CSS那些事儿:掌握网页样式与CSS布局核心技术
div+css布局大全 B/S项目表现层也很重要!
变幻之美Div+CSS网页布局揭秘:案例实战篇
HTML5.CSS3网页布局和样式精粹欢迎大家下载!
CSS布局实例[绝对定位:一栏固定,一栏自适应]