设置子元素的宽度以填充父元素

Question

我想要 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 boxes ，但我想要的是 - 即使盒子数是 one 或 two 我希望它们填充父宽度。我想只使用 CSS 来实现这一点。

原文由 Jithin Raj P R 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 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>

原文由 sol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是下面的代码，我认为这可能对您有所帮助

 	.parent {

  display: -webkit-flex; /* Safari */
  display: flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {

  -webkit-flex: 1;  /* Safari 6.1+ */
  -ms-flex: 1;  /* IE 10 */
  flex: 1;
  margin-left: 1%;
  background: #ddd;
}

 <div class="parent">
  <div class="child"></div>
</div><br>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div><br>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

原文由 shiva krishna 发布，翻译遵循 CC BY-SA 3.0 许可协议