分栏布局
作者：互联网
【逆战班】
所谓分栏，就是将页面的版面划分为若干栏。横排的栏是由上而下垂直划分的，每一栏的宽度相等。效果就像报纸那样。分栏有两种方式，一种是指定分几栏，然后浏览器自动计算出每一栏的宽度；另一种是指定栏的宽度，然后浏览器会根据当前窗口宽度自动计算出分几栏显示。
分栏布局相关属性：
1. column-count : 指定分栏数量
column-count :3; 指当前内容分3栏显示。
2. column-width : 分栏的宽度
column-width :200px; 指每一栏宽度为200像素。
注：column-count和column-width不要同时运用，如果同时运用，则宽度无效。
3. column-gap : 分栏的间距
column-gap :20px; 指各栏之间间距为20像素。
4.column-rule : 分栏的边线（与边框属性相同）
column-rule :1px solid black; 设置宽度为1像素的黑色实线分栏线。
5. column-span : 合并分栏（一般用于标题）
column-span :all; 合并所有栏。
6例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width:500px; /*设置容器宽度*/
border:1px aqua solid;
margin:20px auto;
column-count: 3; /*设置内容分3栏显示*/
column-gap:15px; /*分栏间距为15像素*/
column-rule:1px aqua dashed; /*设置分栏间隔线*/
text-indent: 2em; /*首行缩进2字符*/
}
#box h1{
column-span:all; /*合并所有栏*/
text-align: center;
font-size: 22px;
}
</style>
</head>
<body>
<div id="box">
<h1>任花开落似流年，开到刻骨化为沉淀</h1>
<p>彼岸残花，片片落花情，花开似水似流年。无言的殇，誓言不再回，花残人悴，没了烟雨红尘。一世安宁，逃不过指尖流沙，一指烟凉，经不起流年似水。
花开花落繁花入梦，流年无情入星河……</p>
<p>儿时仰望星空的繁星，数着庭间花开的花瓣，无言风月，安详梦日。搁浅了岁月道不尽的哀伤，弹指流年佛歌尘散。丝丝柔情花落，怕了三千青丝一朝白，
我们等不来岁月带来的柔情，是花落间，那眼角的泪。紫陌红尘的浮华沉醉中，蓦然回首，那如花的容颜，似海的柔情，在范黄的流年间，模糊成画。在琴音下揉成一个个愁结，无由得饮在前世的花开间。</p>
<p>蘸一抹沧桑，花落了一季的忧伤，在笔尖纸上数着细水流年。多少泪飞扬 庭间花开又落了一地，什么一场岁月一人生，什么花落似流年的残。一杯浊酒，
多少世间情，倾尽一生温柔暖了花开岁月，庭间舞动一地花落。风残，花也残了，流水落花春去也。绕在指间的情愫，一身的眷恋，在花开花落间逝去的年华，携着暖阳淡了，暖了……</p>
<p>镌刻心间的花开，轻触了岁月朦胧的情。</p>
<p>沉淀星空的岁月，轻刻了骨子柔情的暖。</p>
<p>花的一生 亦如人生，花开一间 ，花落一下 ，挥手一间。流年似水染尽了斑白，花开庭间，一梦两生，缠绵入骨相思知不知。静听那涓涓流水，
那清风伴着花落，细水长流，在骨子里安好。</p>
<p>所以……</p>
<p>任花开落似流年，开到刻骨化为沉淀</p>
</div>
</body>
</html>
7.效果图
标签：width,column,布局,花落,花开,宽度,分栏 来源： https://www.cnblogs.com/icy-shower/p/12441655.html