在css2中，如果要实现报纸杂志等平面设计中的多列布局是比较困难的，在CSS3中，增加了columns多列布局，可以轻松实现报纸风格类的多列排版，特别适合宽屏幕下的文章布局。

查看案例

案例下载↓

链接：http://pan.baidu.com/s/1cauJ06 密码：skqt

一、案例知识点

1、column-count定义列数

2、column-width列宽

3、column-gap列间距

4、column-rule列之间的分割线

5、column-span跨栏

二、部分代码

1、HTML代码

<div id="wrap">
    <article>
        <h1>...</h1>
        <p>...</p>
    </article> 
</div>

2、CSS部分代码

#wrap{
	box-sizing:border-box;
	width:1258px;
	margin:0 auto;
	padding:1.5em;
	background-color:#E7DED1;
	column-count:3;/*多列的数值，3列*/
	column-width:auto;/*列的宽度*/
	column-gap:2em;/*列与列之间的间隔*/
	column-rule:1px solid rgba(0,0,0,.3);/*列与列之间的分割线，不占空间*/}
#wrap img{
	max-width:100%;/*图片在列中的宽度最大为列宽的100%，如果图片大于列宽也会正确显示，否则浏览器会自动裁剪掉多余的部分*/}

最近忙着ps的教学，web前端的文章更新少了，感觉时间不够用，恨不得一天96个小时。