CSS多列布局

2023-10-17 66

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>

结果为:

CSS多列布局

六、相关属性

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群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
CSS多列布局
上一篇: CSS动画
CSS多列布局
下一篇: CSS图片