CSS3 新增多列布局适合排版很长的文字内容，让其多列显示。使开发者能够轻松实现报纸版式的布局。
colum的相关属性：
| 属性 | 说明 |
|---|---|
| column-count | 属性值是一个数字，规定元素被分为几列 |
| column-width | 列宽 |
| column-gap | 列与列的间隔宽度 |
| column-rule | 列的间隔线，column-rule-color、column-rule-style 和 column-rule-width 的简写方法 |
| column-rule-color | 列的间隔线颜色 |
| column-rule-color | 列间隔线样式 |
| column-rule-width | 列间隔线的宽度 |
| column-span | 设置或检索对象元素是否横跨所有列，属性值：none(不跨列) / all(横跨所有列) |
| columns | colum-width 和 column-count的简写形式 |
注：
1.要注意列宽与列数的设置，很容易产生冲突！
如果设置了column-count,则column-width应该是自动的
如果同时设置了这两个属性，则他们会产生冲突。原则:取大优先，谁设定的宽度值大，则谁生效如果还有剩余空间，会均分给每列，使每列实际宽度大于设置的宽度
2.为了解决兼容问题，最好加上浏览器前缀
html结构
元素里面放一堆文字
<div>
<h2>标题</h2>
这里放一堆你所需要的文字。由于文字太多，我给删掉了。
</div>
CSS样式
div{
column-count: 5;
column-gap: 10px;
column-rule: 2px solid peru;
}
div h2{
font-size: 30px;
column-span: all;
text-align: center;
}
运行效果
多列布局—瀑布流案例
效果图
案例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多列布局-瀑布流案例</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: url(./img/a.png),url(./img/bg.gif);
background-size: 30%;
background-color: #403e49;
}
section{
column-count: 5;
padding: 10px;
column-gap: 6px;
}
figure{
border: 3px solid mistyrose;
break-inside: avoid;
padding: 6px;
margin-bottom: 6px;
}
figcaption{
height: 30px;
font-size: 16px;
color: #a77869;;
line-height: 30px;
text-align: center;
}
img{
display: block;
width: 100%;
}
</style>
</head>
<body>
<section>
<figure>
<img src="./img/1.jpg" alt="">
<figcaption>往后余生 风雪是你</figcaption>
</figure>
</section>
</body>
</html>
结构里面多放一些图片就行了，主要看css样式
