在要使用的标签中直接使用即可。
columns: column-width | column-count;。//每列的宽度 或 显示的列数(2选1)
column-width //每列的宽度不小于多少,在哪个范围区间,屏幕大多几列,小则合并些。
column-conunt //显示的列数等于写的值,屏幕大,每列宽大,屏幕小,不合并,列变小。
column-gap // 列间距,默认由font-size决定
column-rule: column-rule-width column-rule-style column-style-colro //列间的分割线,写法和border一样。
column-span: none(无) | all(横跨所有列) // 标题横跨几列
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>出师表</title>
</head>
<style>
.wrapper{
border: 4px double #000;
column-width: 300px;
/* 最少多少像素 */
/* column-count: 3; */
/* 列数 */
/* width: 900px; */
column-gap: 16px;
/* 列间距,默认继承font-size */
column-rule: 1px dashed #ccc;
/* 设置线框,该线不占用宽度 */
}
h1{
text-align: center;
column-span: all;
/* 横跨所有列 */
}
</style>
<body>
<div class="wrapper">
<h1>出师表</h1>
<p>    先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。</p>
<p>    宫中府中,俱为一体,陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。</p>
<p>    侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。</p>
<p>    将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。</p>
<p>    亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。</p>
<p>    臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。</p>
<p>    先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明,故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。</p>
<p>    愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏,臣不胜受恩感激。</p>
<p>    今当远离,临表涕零,不知所言。</p>
</div>
</body>
</html>
使用columns做瀑布流样式:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
bod, ul, li{
margin: 0;
padding: 0;
list-style: none;
}
ul{
margin: 30px 50px;
column-width: 300px;
/* border: 1px solid #000; */
column-gap: 10px;
/* 为了防止混乱设置的列边距 */
}
li{
display: inline-block;
/* 要么块级元素,要么行内块级元素,这里因为要排过来,所以用行内块级元素 */
width: 300px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
/* IE6混杂模式 */
border-radius: 10px;
margin: 10px 5px;
}
img{
width: 100%;
}
</style>
</head>
<body>
<ul>
<li><img src="./img_huaban/1.jpg" alt=""></li>
<li><img src="./img_huaban/2.jpg" alt=""></li>
<li><img src="./img_huaban/3.jpg" alt=""></li>
<li><img src="./img_huaban/4.jpg" alt=""></li>
<li><img src="./img_huaban/5.jpg" alt=""></li>
<li><img src="./img_huaban/6.jpg" alt=""></li>
<li><img src="./img_huaban/7.jpg" alt=""></li>
<li><img src="./img_huaban/8.jpg" alt=""></li>
<li><img src="./img_huaban/9.jpg" alt=""></li>
<li><img src="./img_huaban/10.jpg" alt=""></li>
<li><img src="./img_huaban/11.jpg" alt=""></li>
<li><img src="./img_huaban/12.jpg" alt=""></li>
<!-- <li><img src="./img_huaban/13.jpg" alt=""></li>
<li><img src="./img_huaban/14.jpg" alt=""></li> -->
</ul>
</body>
</html>