css多列可以更加容易的定义多列文本，像报纸那样。
属性如下：
1、column-count 规定元素应该被分隔的列数
适用于：除了table外的非替换块级元素，table cells,inline-block元素
auto：根据浏览器来计算，integer：取值大于0
2、column-gap 规定列与列之间的间隔大小
3、column-rule 设置或者检索对象列与列之间的边框，复合属性
color-rule-color/color-rule-style/color-rule-width
4、column-fill 设置或检索对象所有列的高度是否统一
auto 列高度自适应内容
balance 所有列的高度以其中最高的一列统一
5、column-span 设置或检索对象元素是否跨所有的列
none不跨列，all 跨所有列
6、column-width 设置或检索对象每列的宽度
7、columns 设置或检索对象的列数和每列的宽度，是一个复合属性
<'column-width'>||<'column-count'>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
div{
column-count:4;
column-gap:30px;
column-rule:2px solid green;
column-span: all;
columns: 50px 3;
}
style>
head>
<body>
<h2>测试标题测试标题测试标题测试标题h2>
<div>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字div>
body>
html>
多列用于瀑布流上可以做出很漂亮的效果
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-size:500px 500px;
background:url(../MYPROJECT/imges/a.png),url(../MYPROJECT/imges/bg.gif);
background-color: hsl(0, 20%, 17%);
}
#items{
width: 90%;
margin: 10px 5%;
column-count: 5;
column-gap: 20px;
column-fill:auto;
}
img{
display: block;
width:100%;
}
#items div{
border:2px solid pink;
margin-bottom: 10px;
padding:5px;
break-inside: avoid;
}
p{
font-size: 18px;
color:#a77869;
text-align: center;
font-weight: bold;
padding:10px 0;
}
style>
head>
<body>
<div id="items">
<div>
<img src="../MyProject/imges/1.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/2.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/3.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/4.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/5.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/6.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/7.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/8.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/9.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
<div>
<img src="../MyProject/imges/10.jpg">
<p>
小动物那是极其可爱的呢
p>
div>
div>
body>
html>