在css2中,如果要实现报纸杂志等平面设计中的多列布局是比较困难的,在CSS3中,增加了columns多列布局,可以轻松实现报纸风格类的多列排版,特别适合宽屏幕下的文章布局。
万博manbext3.0首页登录下载↓
链接:http://pan.baidu.com/s/1cauJ06 密码:skqt
一、万博manbext3.0首页登录知识点
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个小时。
发表评论:
◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。