1、多列布局概述
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
2、常用属性
| 属性 | 版本 | 描述 |
|---|---|---|
| columns | CSS3 | 设置或检索对象的列数和每列的宽度。复合属性 |
| column-width | CSS3 | 设置或检索对象每列的宽度 |
| column-count | CSS3 | 设置或检索对象的列数 |
| column-gap | CSS3 | 设置或检索对象的列与列之间的间隙 |
| column-rule | CSS3 | 设置或检索对象的列与列之间的边框。复合属性 |
| column-rule-width | CSS3 | 设置或检索对象的列与列之间的边框厚度。 |
| column-rule-style | CSS3 | 设置或检索对象的列与列之间的边框样式。 |
| column-rule-color | CSS3 | 设置或检索对象的列与列之间的边框颜色。 |
| column-span | CSS3 | 设置或检索对象元素是否横跨所有列。 |
| column-fill | CSS3 | 设置或检索对象所有列的高度是否统一。 |
| column-break-before | CSS3 | 设置或检索对象之前是否断行。 |
| column-break-after | CSS3 | 设置或检索对象之前是否断行。 |
| column-break-inside | CSS3 | 设置或检索对象内部是否断行。 |
3、常用属性说明
3.1 显示多少列.
（1）如果不设置 column-count 时
显示列数 = （总宽度+列间距）/ (列宽度+列间距)
（2）如果不设置 column-count 时
| 条件 | 显示列数 |
|---|---|
| (列宽度+列间距)*列数 -列间距 <= 盒子宽度 | 显示列数量 |
| (列宽度+列间距)*列数 -列间距 <= 盒子宽度 | (总宽度+列间距）/ (列宽度+列间距) |
3.2 实例效果
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS多列布局</title>
<style type="text/css">
p{
width: 800px;
margin: 5px;
border: 1px solid gray;
}
.div1{
column-width: 200px;
column-count: 3;
column-gap: 100px;
column-rule: 150px solid red;
width: 800px;
border: 1px solid red;
margin: 5px;
}
.div2{
column-width: 200px;
column-count: 3;
column-gap: 100px;
column-rule: 150px solid red;
width: 799px;
border: 1px solid red;
margin: 5px;
}
</style>
</head>
<body>
<p>
column-width:200px;<br>column-gap: 100px;<br>column-count: 3;<br>width: 800px;<br> column-rule: 150px solid red;<br>
</p>
<p style="color: red">
(column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
<=800px<br>
因此显示列数 = 设置列数;
<br/>
column-rule-width的值，不影响列数显示。
</p>
<div class="div1">CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。
</div>
<p>
column-width:200px;<br>column-gap: 100px;<br>column-count: 3;<br>width: 799px;<br> column-rule: 150px solid red;<br>
</p>
<p style="color: red">
(column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
>799px<br>
因此显示列数 = (799+100)/(200+100)=2;
<br/>
column-rule-width的值，不影响列数显示。
</p>
<div class="div2">CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，
</body>
</html>
运行效果：
image.png
网友评论