CSS3提供了多列布局(Multi-column Layout)模块, 更加容易的实现多列布局.

比如以前需要手写很多代码实现的多列布局更加的简单和健壮.

ie10+开始支持多列布局, 其他高级浏览器的最新版本都支持.

CSS3 可以将文本内容设计成像报纸一样的多列布局.

一. 最重要的 2 个属性

column-count和column-width

1.1 column-count

这个属性用来设置最大的列数.

浏览器考虑可用的空间, 列宽, 列间隙, 来最大程度的满足这个最大列数.

1.2 column-width

设个属性会设置每列的最小的列宽, 是一个长度值

浏览器创建列的时候, 每列会至少是这个宽度, 但是可能会更宽.

当浏览器决定了列的数量之后, 就会开始绘制每列. 如果还有多余的水平空间, 浏览器则会平分剩下的空间给每一列, 让每一列加宽.

说明:

• 这两个属性会尽力的适应浏览器的变化. 当浏览器收缩的时候, 如果最小列宽不满足的时候, 会减少列的数量, 来满足最小列宽.

• 如果这个属性没有设置, 则浏览器会以合适的宽度尽量的多列来满足最大列数.

<style>
div{
    width: 800px;
    border: 1px solid #000;
    column-count: 3;
    column-width: 200px;
}
</style>
<div>童年影视经历
    杨幂出生于北京市宣武区（已并入西城区）的一个普通家庭，父亲杨晓林是刑警，因一家三口都姓杨，故取名为“幂”（在数学上表示乘方运算的结果，即一个数的自乘）[3]，其大伯是清华大学数学系教授杨晓京[4]。小时候的她特别顽皮静不下心，因此父母替她报名中国儿童电影制片厂的儿童影视表演培训班。1990年，正逢电视剧《唐明皇》剧组来挑小演员，4岁的小杨幂有幸被选中饰演幼年咸宜公主，由此开始了自己的童年演艺之路。之后她相继出演了电影《武状元苏乞儿》和电视剧《猴娃》等作品[5]。虽然当时的杨幂并不知名，但是她拍戏时认真的态度却给《猴娃》的导演兼制片人李小婉留下了深刻印象[6]。

    随着小学入学年龄的到来，杨幂开始进入学校学习。在1996年与李亚鹏合作完电影《歌手》后，她的童年演艺生涯宣告结束。

    模特出道至仙剑奇侠传三（荣信达时期）
    初二时，杨幂萌生了当杂志模特的念头。初中毕业后，她在同学母亲的推荐下为《瑞丽》杂志做起了平面模特，从此正式涉足演艺圈[7]。之后她与成龙、周杰伦等大牌艺人合作拍摄了一系列广告作品，并于2003年9月接拍了自己长大后的首部电视剧《红粉世家》。在此期间，还在北京市第十四中学就读的她正式签约经纪公司北京荣信达影视艺术，2004年6月在李少红的引荐下出演张纪中版《神雕侠侣》中的郭襄一角[8]。正是这部作品开启了她在古装剧领域的道路，奠定了其今后发展的基础。

    在高中三年，由于要兼顾学业和拍戏，这多少影响了杨幂的学习成绩，为此临近毕业的她主动报考了艺术类院校[9]。2005年，杨幂以专业课第一的成绩考入北京电影学院，开始接受系统的影视训练[10]。此外她还在当年拍摄了电视剧《聊斋》、《上书房》、《王昭君》等重要作品。2006年3月，在《神雕侠侣》正式播出后，“小东邪”郭襄的形象迅速深入人心，杨幂因此崭露头角[11]。另一方面，除拍摄电视剧外，她还与陈坤等合作出演惊悚悬疑电影《门》，这是杨幂正式出道以来的大银幕处女作。不过随后的两年中，她的演艺事业陷入停滞，只是在2008年凭借《王昭君》入围第24届中国电视金鹰奖“最佳表演艺术女演员”提名初选[12]。

</div>

1.3 columns

columns是column-count和column-width的简写.

columns: 3 200px;

二. 一些其他属性

2.1 column-gap

column-gap(列间隙)用来控制列与列之间的间隙.

这个值不会被浏览器控制.

默认值是1em, 但是在不同的浏览器中可能会不同. 如果你很关注这个值的大小, 可以手动指定他.

2.2 column-fill

这个属性用来平衡列高.

他的默认值是 balance, 会尽力平衡各列之间的高度.

当给元素设置了height或max-height后, 我们想让没列尽快能的把高度占满, 可以把设置为auto

2.3 column-rule

用来设置列与列之间的分割线.

他的值和border的值设置方式一样.

column-rule: 3px solid red;

是下面三个属性的简写:

column-rule-width, column-rule-style, and column-rule-color

说明:

• column-rule-width的值可以是thin, medium, or thick这三个字符串.

• column-rule-style的值和border-style一样.