本文详细介绍了使用CSS实现等分布局的四种方法：1) 浮动布局，但存在IE7-浏览器的宽度误差问题；2) inline-block布局，需处理元素间的间隙和垂直对齐；3) table布局，可能导致内容撑开宽度；4) flex布局，最现代且灵活的方法。每种方法都有其优缺点和适用场景。
原标题：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实现
责任编辑：
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
