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 | | auto | auto | 非替换的块级元素 (table元素除外)、 表格单元格、行内块元素 |
| column-fill | auto | balance | balance | 多列元素 |
| column-gap | | normal | normal | 多列元素 |
| column-rule | || || [ | transparent ] | 同单个元素 | 多列元素 |
| column-rule-color | color值 | 多列元素 | |
| column-rule-style | none | 多列元素 | |
| column-rule-width | medium | 多列元素 | |
| columns | || | 同单个元素 | 非替换的块级元素 (table元素除外)、 表格单元格、行内块元素 |
| column-span | 1 | all | 1 | 静态、非浮动元素 |
| column-width | | auto | auto | 非替换的块级元素 (table元素除外)、 表格单元格、行内块元素 |
在我们经常阅读的报纸中，一般情况下一个版面被分成多个列进行排版，或者在一般的杂志中，一页被分成2列排版。在CSS3颁布之前，在HTML中实现这样 的功能是非常麻烦的。现在，CSS3规范中对多列布局进行了定义，使用CSS样式单就可以轻松搞定了。支持的浏览器目前有：Firefox、 Chrome、Safari等。目前，这些浏览器对该标准的支持采取还是扩展的方法，也就是采用-moz、-webkit等浏览器特有的属性，但是，这并 不影响对W3C标准的理解。
下面我就举一个简单的例子。下面例子中的div1这个元素，采用column-count属性将div显示的内容划分为2列显示，由于没有特别设置每列的 宽度，则列的宽度是自动平均分配的。div2这个div，设置列的宽度和列间距，另外还设置列与列之间的分割线的样式。注意：要查看div2的效果，则浏 览器的窗口要宽一些。
XML/XHTML 代码
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->
<
style.
type
="text/css"
>
#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 >
#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 >
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/15723462/viewspace-625407/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/15723462/viewspace-625407/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
