阿牛博客

webapp开发之父盒子宽度百分百子元素均分方案

大家平时开发手机端网页的时候经常的会写到类似的商品列表:外面盒子宽度100%里面盒子均分并且盒子直接有边框有填充,之前开发的时候总结了几种写法,在这里一一列一下:

例如这样子的列表:

实现这样的布局我发现了主要有三种:

html:

第一种:使用传统的百分比

less代码:

关键代码:
float: left;
width: 19.33%;
padding: 0 7%;

关键点:
01.浮动
02.width和左右padding加起来刚好等于100%

优点:
基本兼容所有浏览器
缺点:
计算比较多

第二种:使用css3新属性:box-sizing: border-box;

//box-sizing:属性允许以特定的方式定义匹配某个区域的特定元素。即:把盒子的padding和边框计算在盒子的总宽度内
less代码:

关键代码:
float: left;
width: 33.33%;
box-sizing: border-box;

浮动+平均分配的宽度

优点:
计算方便 不用考虑盒子的padding和border 直接计算宽度
缺点:
正如上面的如果宽度不能被整除子盒子又有边框 会导致最后面的盒子宽度有一定的误差
ie8及ie8以上才支持该属性

第三种:使用css3新属性:父元素:display: box;子元素:box-flex: 1;

//box-flex 属性规定框的子元素是否可伸缩其尺寸。边框和尺寸都会计算在里面
less代码:

关键代码:
父标签要设置:
display:box;

子标签设置比例
box-flex: 1;

优点:
设置方便 不用过多的计算
缺点:
IE10及以上才支持 box-flex 属性
以上方案各有优劣,大家可以按照自己的需求选一种合适自己的。

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/139

上一篇: css3动画介绍之(三) – (CSS3 animation属性) » 下一篇: php时间戳转换成年月日 »