首页>案例集

CSS3案例集11:columns多列实现报纸排版效果

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

CSS3报纸排版效果.jpg

查看案例

案例下载↓

链接: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个小时。

给你点赞.jpg

点赞


3
保存到:

相关文章

Top