CSS实现等分布局的4种方式
98 浏览量
2020-09-27
21:47:29
上传
评论
收藏 76KB PDF 举报
CSS实现等分布局的实现等分布局的4种方式种方式
主要为大家详细介绍了CSS实现等分布局的4种方式，等分布局是指子元素平均分配父元素宽度的布局方式，本
文将介绍实现等分布局的4种方式，感兴趣的小伙伴们可以参考一下
等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式
思路一思路一: float
缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差
【【1】】float + padding + background-clip
使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景
CSS Code复制内容到剪贴板
1. <style>
2. body,p{margin: 0;}
3. .parentWrap{
4. overflow: hidden;
5. }
6. .parent{
7. margin-right: -20px;
8. overflow: hidden;
9. }
10. .child{
11. float: left;
12. height: 100px;
13. width: 25%;
14. padding-right: 20px;
15. box-sizing: border-box;
16. background-clip: content-box;
17. }
18. </style>
19.
XML/HTML Code复制内容到剪贴板
1. <div class="parentWrap">
2. <div class="parent" style="background-color: lightgrey;">
3. <div class="child" style="background-color: lightblue;">1</div>
4. <div class="child" style="background-color: lightgreen;">2</div>
5. <div class="child" style="background-color: lightsalmon;">3</div>
6. <div class="child" style="background-color: pink;">4</div>
7. </div>
8. </div>
9.
【【2】】float + margin + calc
使用margin实现子元素之间的间距，使用calc()函数计算子元素的宽度
CSS Code复制内容到剪贴板
1. <style>
2. body,p{margin: 0;}
3. .parentWrap{
4. overflow: hidden;
5. }
6. .parent{
7. overflow: hidden;
8. margin-right: -20px;
资源评论
