咱们日常会利用float布局来解决IE浏览器CSS的兼容性问题,好比淘宝,就是用float布局来实现的。 咱们会在淘宝页面会看到下图这样一种布局。 css
假如咱们令每一个子元素宽度为100px,一共3个子元素,给每一个子元素一个margin-right,设为50px,那父元素宽度应为100x3+50x2=400px。咱们设置一些样式。html和css代码以下。html
//HTML
<div class="father clearfix">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
复制代码
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.father {
width: 400px;
height: 100px;
margin: 10px;
background-color: #d5a4cf;
border: 1px solid black;
}
.son {
border: 1px solid black;
background-color: #fff1ac;
float: left;
margin-right: 50px;
width: 100px;
height: 100px;
}
复制代码
此时效果以下 浏览器
//HTML
<div class="father clearfix">
<div class="middle clearfix">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</div>
复制代码
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.father {
width: 400px;
height: 100px;
margin: 10px;
background-color: #d5a4cf;
outline: 1px solid black;
}
.son {
border: 1px solid black;
background-color: #fff1ac;
float: left;
margin-right: 50px;
width: 100px;
height: 100px;
}
.middle {
margin-right: -50px;
}
复制代码
这个时候咱们发现,中间的div经过“延伸”右外边距把带三个子元素“包进去”了,从而实现了平均布局。 布局
经过咱们的测试,咱们找到了解决平均布局的方案,但愿能对你们有帮助。相关代码请参考个人demo。因为本人水平有限,若有描述不许确的地方请给我留言,欢迎交流~测试