IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法可以让WEB开发人员轻松的让文本呈现多列显示。咱们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另外一端、而后换到下一行的行首，若是眼球移动浮动过大，他们的注意力就会减退，容易读不下去。因此，为了最大效率的使用大屏幕显示器，页面设计中须要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版同样。可是在CSS3的多列布局(columns)语法功能出现以前，人们若是想让文本呈多列显示，要么使用绝对定位，手动给文本分段落，或者使用JS脚本等，而新语法的出现，完全改变了这样的局面。

对于一些不支持多列布局特征的浏览器，好比IE9/IE8，会把这些属性所有忽略，这样布局就呈现出传统的单块布局。为了保证浏览器最大的兼容性，咱们在使用多列布局属性时，最好添加浏览器引擎前缀，最基本的要加上三种：谷歌浏览器的-webkit-，火狐浏览器的-moz-，IE浏览器的-ms-，最后，别忘了不带前缀的写法。

分栏布局有三个参数能够设定，分别为column-width、column-count、column-gap、column-rule，具体描述如表1：

表1  CSS3分栏布局参数说明

 

   

 

1  列个数和列宽度

无论想让一段文本呈多少列显示，你须要的只是两个属性：column-count和 column-width。

（1）使用column-count为某个文章设置两列，代码以下：

 

这将会使文本里的内容显示成两列(首先你的浏览器要支持这种新语法，好比火狐浏览器、谷歌浏览器，IE10+等)，在这里咱们使用了column-count兼容浏览器，使用浏览器打开这个html文件，效果如图1所示：

图1  column-count分栏布局

 

（2）column-width属性控制列的宽度。若是你没有提供column-count属性值，那么，浏览器就是自主决定将文本分红合适的列数。将上例的CSS代码替换以下：

 

这将会使文本里的内容被分红若干列，每列的宽度为10em，分栏效果如图2所示：

图2  column-width分栏布局

 

2  列之间的缝隙间隔宽度

两列之间会有缝隙间隔。缺省状况下这个间隔宽度是1em，但若是你使用column-gap属性，就会修改这个缺省的宽度值，将上例的分栏宽度为20em，分栏间隔为2em。将上例的CSS代码替换以下：

 

这将会使文本里的内容被分红若干列，每列的宽度为20em，分隔间隔为2em，效果如图3所示：

图3  column-gap分栏间隔

 

3  分栏间隔符

column-rule的语法以下：

column-rule: column-rule-width column-rule-style column-rule-color;

column-rule属性是一个简写属性，用于设置全部column-rule-* 属性。它们的参数及描述如表2：

表2  column-rule参数取值及描述

 

 

其中，column-rule-style有如下可选值，它们的取值及描述如表3：

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

表3  column-rule-style参数取值及描述

 

 

下面，咱们将把文本分为三栏，并给出2em的缝隙间隔，每栏间隔都给一个黑色的虚线间隔符。CSS代码以下：

 

这将会使文本里的内容被分三列，分隔间隔为2em，分隔符为黑色虚线，效果如图4所示：

图4 column-rule分栏符

 

CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的很是有用的功能特征。你会发如今不少地方都须要用到它们，特别是须要自动平衡列高度的地方。