假设有一个宽度固定的网站。我需要在其中放置3个盒子，盒子之间有一些空间（填充）。但是我不需要在左侧和右侧填充。
我该如何摆脱呢？当我将padding-left或设置padding-right为相应的框时，这些框不再具有相同的大小（宽度/高度）。
这是我的代码：
.wrap {
margin: 0 auto;
width: 1024px;
height: 800px;
background-color: yellow;
}
.box {
box-sizing: border-box;
width:33.3%;
height: 200px;
float: left;
padding: 10px;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
}<div class="wrap clearfix">
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
<div class="box"><div class="box-inner"></div></div>
</div>虽然所有其他答案似乎都是正确的，但我会使用flexbox来完成，因为它为您提供了更大的布局灵活性。Flexbox具有一个特殊的属性，justify-content您要为其分配值space-between。
.wrap {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-content:flex-start;
margin: 0 auto;
width: 1024px;
height: 800px;
background-color: yellow;
}
.box {
box-sizing: border-box;
width:calc(33.3% - 5px);
margin-bottom:5px;
height: 200px;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句