设置子项的宽度以填充父项

Question

我希望div的孩子填充其宽度。

现在正在使用这样的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

并且它正在为3 boxes工作，但我想要的是 - 即使盒子数为one或two，我希望它们填充父宽度。我想只使用 CSS 。

来实现这一目标

Answer 1

您可以使用DATE_FORMAT(date,format)属性来实现此目的。

这是一个演示：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将父级设为flexbox，并在有空位时为子项定义。我删除了.child的宽度。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用flexbox：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您正在使用30％的宽度，这对于每个元素都是固定的，因此每次创建其他元素时都是如此 它的大小是固定的，并且在驻留元素的末尾添加，并且在总宽度大于父容器的大小之后它会溢出。

而是使用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>

Answer 5

您可以使用flexbox来实现此目的。

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 7

如果它是一个固定数量的孩子，那么你总是可以通过（父亲宽度/孩子的数量）计算孩子的宽度并将该宽度固定到孩子。但是如果你的代码有动态子代，你可以使用display的flex属性。 只需将HttpClientXsrfModule.withOptions({ cookieName: 'My-Xsrf-Cookie', headerName: 'My-Xsrf-Header', }) 添加到display:flex，将.parent添加到flex:1。

但是，这与浏览器兼容性几乎没有问题，如果您要定位旧浏览器，则不建议这样做。即使很少有元素不支持flex属性。请参阅此link获取信息。我建议写一个javascript代码来计算孩子的宽度并添加属性。这很好用flex！ 希望这对你有所帮助！您可以了解有关flexbox here的更多信息。