原标题:CSS实现等分布局的4种方式
在很多页面排版中都会有很多等分排版布局的栏目,本文章主要为大家详细介绍了CSS实现等分布局的4种方式,感兴趣的小伙伴们可以参考一下
一: float实现
缺点: IE7-浏览器下对宽度百分比取值存在四舍五入的误差
用float + padding + background-clip 样式实现
代码:
效果图:
二: inline-block实现
缺点:需要设置垂直对齐方式vertical-align,则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性,兼容代码是display:inline;zoom:1;
用inline-block + padding + background-clip 样式实现
三: table实现
缺点:元素被设置为table后,内容撑开宽度。若要兼容IE7-浏览器,需要改为
用table + margin负值实现
四: flex实现
责任编辑: