CSS3尝鲜(一):CSS多列布局
2010-01-18 22:14
337 查看
CSS3规范中的多列布局(或者叫分栏)已经于2009年12月17日被W3C作为预推荐标准(Candidate
Recommendation)进行发布。该模块的在
W3C上的地址为:http://www.w3.org/TR/css3-multicol/。W3C规范定义的实现多列布局的属性有:
在我们经常阅读的报纸中,一般情况下一个版面被分成多个列进行排版,或者在一般的杂志中,一页被分成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的浏览器,就可以看到上面的例子被显示了多列的布局。
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元素除外)、表格单元格、行内块元素 |
的功能是非常麻烦的。现在,CSS3规范中对多列布局进行了定义,使用CSS样式单就可以轻松搞定了。支持的浏览器目前有:Firefox、
Chrome、Safari等。目前,这些浏览器对该标准的支持采取还是扩展的方法,也就是采用-moz、-webkit等浏览器特有的属性,但是,这并
不影响对W3C标准的理解。
下面我就举一个简单的例子。下面例子中的div1这个元素,采用column-count属性将div显示的内容划分为2列显示,由于没有特别设置每列的
宽度,则列的宽度是自动平均分配的。div2这个div,设置列的宽度和列间距,另外还设置列与列之间的分割线的样式。注意:要查看div2的效果,则浏览器的窗口要宽一些。
<style type="text/css" mce_bogus="1">#div1{ -moz-column-count:2; -webkit-column-count:2; } #div2{ border:6px solid orange; padding:6px; text-align:justify; -moz-column-width:20em; -moz-column-gap:3em; -moz-column-rule:6px solid blue; -webkit-column-width:20em; -webkit-column-gap:5em; -webkit-column-rule:6px solid blue; }</style> <div id="div1"> 当春风再一次吹拂她的脸庞时,那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复,仿佛重生一般,花儿般的笑颜又重新浮上了她的脸庞。而他,看到她康复的样子,高兴极了,但他却不会讲什么,依旧如故,默默地陪在她身旁。他爱她,就包括爱她的一切缺点。这样做,他并不觉得有失尊严。他认为既然爱了,就应该无怨无悔。而她,觉得开始有点喜欢上了他,有些依赖他。但她认为,离爱还很遥远。<br/> 转眼她和他都要毕业了,她甚至没有征求他的意见,就直接去了北方的一座城市,而他,却追随着她也到了这里。本来,在南方那座城市,他的家人早已给他联系好了一家不错的公司,但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工,难免心神俱疲,这个时候,她就很想找一个依靠,给她一点家的温暖。明明知道他一直愿意做她的依靠,可她却不愿意把自己的一生交付于他,因为她觉得自己一直不爱他,不爱,又如何依靠,再说,他也不能提供给她想像中的生活。 </div> <hr/> <div id="div2"> 当春风再一次吹拂她的脸庞时,那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复,仿佛重生一般,花儿般的笑颜又重新浮上了她的脸庞。而他,看到她康复的样子,高兴极了,但他却不会讲什么,依旧如故,默默地陪在她身旁。他爱她,就包括爱她的一切缺点。这样做,他并不觉得有失尊严。他认为既然爱了,就应该无怨无悔。而她,觉得开始有点喜欢上了他,有些依赖他。但她认为,离爱还很遥远。<br/> 转眼她和他都要毕业了,她甚至没有征求他的意见,就直接去了北方的一座城市,而他,却追随着她也到了这里。本来,在南方那座城市,他的家人早已给他联系好了一家不错的公司,但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工,难免心神俱疲,这个时候,她就很想找一个依靠,给她一点家的温暖。明明知道他一直愿意做她的依靠,可她却不愿意把自己的一生交付于他,因为她觉得自己一直不爱他,不爱,又如何依靠,再说,他也不能提供给她想像中的生活。 </div>
如果使用Firefox 3.5、Google Chrome或者Safari4的浏览器,就可以看到上面的例子被显示了多列的布局。
相关文章推荐
- CSS3尝鲜(一):CSS多列布局
- CSS3尝鲜(一):CSS多列布局
- CSS3尝鲜(二):用CSS设置多个背景、背景渐变、指定背景大小--孟宪会
- CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
- CSS3尝鲜(二):用CSS设置多个背景、背景渐变、指定背景大小
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- CSS3尝鲜(二):用CSS设置多个背景、背景渐变、指定背景大小
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- 11.07 CSS布局及CSS3的新特性
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
- CSS自学笔记(15):CSS3多列布局
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计
- 关于CSS和CSS3的布局小知识(干货)
- CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应
- html5+css3之CSS中的布局与Header的实现