如果会看报纸你一定会看到很多多列显示文本的效果，那么在网页布局中有没有什么方便的方法可以实现这个效果呢？
首先介绍一下css中关于多列的属性：
css中关于多列的属性
有的属性看描述我们能一眼明了，接下来我将其中几个我需要查找资料来多多了解的属性分享一下
column-fill：
| 值 | 说明 |
|---|---|
| balance | 列长短平衡。浏览器应尽量减少改变列的长度 |
| auto | 列顺序填充，他们将有不同的长度 |
column-rule-style:
| 值 | 说明 |
|---|---|
| none | 定义没有规则 |
| hidden | 隐藏 |
| dotted | 定义点状规则 |
| dashed | 定义虚线规则 |
| solid | 定义实线规则 |
| double | 定义双线规则 |
| groove | 定义 3D grooved 规则。该效果取决于宽度和颜色值 |
| ridge | 定义 3D ridged 规则。该效果取决于宽度和颜色值 |
| inset | 定义 3D inset 规则。该效果取决于宽度和颜色值 |
| outset | 定义 3D outset 规则。该效果取决于宽度和颜色值 |
如果我这样设置
column-rule: 10px outset #EBCCCC;
groove.png
ridge.png
inset.png
outset.png
column-rule-width:
| 值 | 说明 |
|---|---|
| thin | 指定一个细边框的规则（默认细边框） |
| medium | 定义一个中等边框规则（默认中等边框） |
| thick | 指定一个粗边框的规则（默认粗边框） |
| length | 指定宽度的规则（指定高度值） |
column-span:
| 值 | 说明 |
|---|---|
| 1 | 元素应跨越一列 |
| all | 该元素应该跨越所有列 |
示例：
Demo happy-day
HTML代码：
<div>
<h2>开心的日子</h2>
这是一个值得庆祝的日子，这是一个值得说道的日子，这是一个万众瞩目的日子，所有的一切都是值得肯定的，今天我们欢聚一堂，在所有人的见证下迎来了新的一天，在这里我衷心的祝愿所有人都能心想事成。
不得不说虽然这是一个阴雨的日子，但是我的心中却充满了喜悦。
</div>
CSS代码：
div{
column-count: 3;
column-rule: 10px outset #EBCCCC;
column-rule-width: length;
}
div h2{
text-align: center;
column-span: all;
}
好啦，所有的属性都介绍完毕啦，现在开始试着排版一篇自己写的小文章吧!
网友评论