平分布局 html,实现CSS平分布局的4种方式

实现CSS等分布局的4种方式

前面的话

等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式

思路一: float

缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差

【1】float + padding + background-clip

使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景

}.parent{margin-right:-20px;overflow:hidden;

}.child{float:left;height:100px;width:25%;padding-right:20px;box-sizing:border-box;background-clip:content-box;

}

1