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

Question

我希望

标签中的子元素可以填满整个宽度。

目前我使用了以下代码：

.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来实现此目标。

- Jithin Raj P R

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

---

@JithinRajPR 是的，子元素会自动填充容器。 - sol

inline-flex和flex有什么区别？哪一个更适合我的情况？ - Jithin Raj P R

注意：那些要使用这个答案的人请注意 - 在Safari中，值“flex”和“inline-flex”需要前缀才能正常工作。对于“flex”，请使用“display：-webkit-flex”，对于“inline-flex”，请使用“display：-webkit-inline-flex;” 祝好运。 :) - Jithin Raj P R

Answer 2

你可以将父元素设置为flexbox，并定义当有空间可用时子元素可以扩展。我移除了.child的宽度设置。

.parent {
  width: 100%;
  display: inline-flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-block;
  margin-left: 1%;
  height: 100px;
  background: #ddd;
  flex-grow: 1;
}

<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>

- Gerard

---

如果子元素没有高度，这个代码会起作用吗？inline-flex和flex有什么区别？ - Jithin Raj P R

是的，它可以不用设置高度（对于子元素）。 inline-flex 和 flex 的区别在于后者是块级元素。我选择使用 inline-flex，因为您将其父元素定义为 inline-block。 - Gerard

Answer 3

使用flexbox：

.parent {
  width: 100%;
  display: flex;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.child {
  flex: 1;
  margin: 0 10px;
  height: 100px;
  background: #ddd;
}

<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>

- fen1x

Answer 4

您正在使用类似于30％的宽度，这对于每个元素都是固定的，因此每次创建其他元素时，其大小都是固定的，并添加到现有元素的末尾，在总宽度超过父容器的宽度后会发生溢出。

Instead use flex-box.

.parent {
  width: 100%;
  display:flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  flex:1;
  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 class="child"></div>
  <div class="child"></div>

</div>

- Ashish Mishra

Answer 5

你可以使用flexbox来实现这一点。

下面的演示展示了它如何与更多的子节点以及高度为零的节点一起工作。

我还改变了子项的margin属性，以便与flexbox正常工作。

.parent {
  width: 100%;
  display: inline-flex; /*used inline-flex here, to mirrior your inline-block setting, but you can use flex*/
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-flex;
  flex-grow: 1;
  margin: 0 1%;
  height: 100px;
  background: #ddd;
}

/*demontration for zero-height child elements*/
.child:nth-child(2) {
  height: 0;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <!-- remove these to test with different child count --->
  <div class="child"></div>
  <div class="child"></div>
</div>

- beerwin

Answer 6

以下是代码，我认为这可能对你有帮助。

 .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

Answer 7

如果子元素数量是固定的，那么您可以通过计算（父元素宽度/子元素数量）来确定子元素的宽度，并将该宽度固定到子元素上。但是，如果您的代码具有动态子元素，则可以使用显示的 flex 属性。只需将 display:flex 添加到您的 .parent 中，并将 flex:1 添加到您的 .child 中即可。

然而，这在浏览器兼容性方面存在一些问题，如果您的目标是旧版浏览器，则不建议使用。甚至有一些元素不支持 flex 属性的情况。请参考 link 了解更多信息。我建议编写一个 JavaScript 代码来计算子元素的宽度并添加属性。否则，使用 flex 是个好选择！希望这对您有所帮助！您可以在 here 学习更多关于 flexbox 的知识。

- Supratik Rulz