CSS多列布局是一种在页面上创建多个垂直列的方法,使内容能够以更易读的方式呈现。这种布局方式常用于报纸和杂志的排版,现在也被广泛应用在网页设计中。多列布局与分页媒体密切相关,每一个列框都成为一个片段,就像一个打印的页面成为整个文档的片段一样。因此,现在 CSS 分片规范中定义的属性需要控制内容如何在列之间断开。
一、多列属性
CSS3引入了专门的属性来控制多列布局,主要包括:
1、column-count:用于指定需要分割的列数。
2、column-gap:用于指定列之间的像素差距。
3、column-rule:用于定义列之间的分隔线。
二、创建多列
column-count 属性指定了需要分割的列数。以下实例将 <div> 元素中的文本分为 3 列:
div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }
三、列与列的间隙
column-gap 属性指定了列与列间的间隙。以下实例指定了列与列间的间隙为 40 像素:
div { -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; }
四、列边框
column-rule属性在列之间设置规则的宽度,样式和颜色:
.newspaper { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; -webkit-column-rule: 4px outset #ff00ff; -moz-column-rule: 4px outset #ff00ff; column-rule: 4px outset #ff00ff; }
五、无序列表项
以下示例使用列布局来定位无序列表项:
<!DOCTYPE html> <html> <head> <style type="text/css"> ul { margin-left: 5px; width: 250px; height: 100px; -webkit-column-count: 2; -khtml-column-count: 2; -moz-column-count: 2; -ms-column-count: 2; -o-column-count: 2; column-count: 2; } li { list-style: disc inside; } </style> </head> <body> <ul> <li>A</li><li>B</li><li>C</li><li>D</li> <li>E</li><li>F</li><li>G</li><li>H</li> <li>A</li><li>B</li><li>C</li><li>D</li> <li>E</li><li>F</li><li>G</li><li>H</li> </ul> </body> </html>
结果为:
六、相关属性
1、column-fill:指定如何填充列。
2、column-rule-color:指定两列间边框的颜色。
3、column-rule-style:指定两列间边框的样式。
4、column-rule-width:指定两列间边框的厚度。
5、column-span:指定元素要跨越多少列。
6、column-width:指定列的宽度。
7、columns:column-width 与 column-count 的简写属性。