CSS多列布局
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 的简写属性。
广告合作
QQ群号：4114653
温馨提示：
- 本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。邮箱：2942802716#qq.com（#改为@）。
- 本站原创内容未经允许不得转裁，转载请注明出处“站长百科”和原文地址。