利用css创建多列文本布局

如果会看报纸你一定会看到很多多列显示文本的效果，那么在网页布局中有没有什么方便的方法可以实现这个效果呢？

首先介绍一下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代码： 
    

            
开心的日子
            这是一个值得庆祝的日子，这是一个值得说道的日子，这是一个万众瞩目的日子，所有的一切都是值得肯定的，今天我们欢聚一堂，在所有人的见证下迎来了新的一天，在这里我衷心的祝愿所有人都能心想事成。
            不得不说虽然这是一个阴雨的日子，但是我的心中却充满了喜悦。
    

CSS代码：
div{
      column-count: 3;
      column-rule: 10px outset #EBCCCC;
      column-rule-width: length;
}

div h2{
    text-align: center;
    column-span: all;
}

好啦，所有的属性都介绍完毕啦，现在开始试着排版一篇自己写的小文章吧!