等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式
思路一: float
缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的误差
【1】float + padding + background-clip
使用padding来实现子元素之间的间距,使用background-clip使子元素padding部分不显示背景
CSS Code复制内容到剪贴板
body,p{margin: 0;}
.parentWrap{
overflow:hidden;
}
.parent{
margin-right: -20px;
overflow:hidden;
}
.child{
float:left;
height:100px;
width: 25%;
padding-right:20px;
box-sizing:border-box;
background-clip:content-box;
}
XML/HTML Code复制内容到剪贴板
1