我希望div的孩子填充它的宽度.
现在我正在使用这样的代码：
.parent {
width: 100%;
display: inline-block;
height: 120px;
background: #000;
padding: 10px;
Box-sizing: border-Box;
}
.child {
display: inline-block;
margin-left: 1%;
width: 31.4%;
height: 100px;
background: #ddd;
}
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
并且它适用于3个盒子,但我想要的是 – 即使盒子数是一个或两个我希望它们填充父宽度.我想只使用CSS实现这一点.
解决方法
您可以使用
flexbox属性实现此目的.
这是一个演示：
.parent {
display: flex;
height: 120px;
background: #000;
padding: 10px;
Box-sizing: border-Box;
}
.child {
height: 100px;
background: #ddd;
flex: 1;
margin: 0 10px;
}
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div>
