当子元素换行时，删除父元素的多余宽度

Question

我有一个带有Points Price + ( Accounts Count * 0.25)背景色的div容器。

在这个div中，我使用display: inline-block;并排添加更多矩形div。

当一行中没有足够的空间用于所有div时，下一个div添加到其他行下面，在页面右侧留下一个空白空间。剩下的空白区域有我容器背景的颜色，但我希望它是白色的。

左边的图像是目前的样子。右边的图像应该是它​​的样子;父母的背景应该缩小其孩子的周围：

以下是jsfiddle以下内容：

float:left

.bigDiv {
  background-color: #aaa;
  display: inline-block;
}
.item {
  height: 50px;
  width: 150px;
  background-color: #000;
  float: left;
  margin: 10px;
}

Answer 1

创建＆＃34;伪背景＆＃34;

我刚刚提出了一个有点......创造性的解决方案：

• 父母没有背景，只有填充和overflow: hidden

• 每个子div都有一个::before伪元素，它将创建一个＆＃34;伪背景＆＃34; （z-index: -1将其移至div背景之后）

• 伪背景位于top，left和right的负值，可将其拖动到divs填充中。

• height: 1000%可以是任何荒谬的数字，只要它足够高以覆盖每一行div。使用父div

上的overflow: hidden干净地切断多余的部分

这就是每个div的样子，黑色边框是父母的边缘，这是黄色＆＃34;伪背景＆＃34;被切断了：

它变成了这个：

注意：这是一个纯粹的视觉思维实验，在某些情况下可能会有用。 div仍然占据相同的宽度，它没有背景颜色。

实施例

调整大小，看看＆＃34;伪背景＆＃34;适用于所有宽度。

＆＃13;

＆＃13;

.wrapper {
  overflow: hidden;
  padding: 10px 0 0 10px;
  width: 70%;
}
.wrapper > div {
  height: 40px;
  background: #F00;
  margin: 0 10px 10px 0;
  width: 200px;
  float: left;
  position: relative;
}
.wrapper > div::before {
  content: '';
  position: absolute;
  background: rgba(255, 255, 0, 1);
  left: -10px;
  right: -10px;
  top: -10px;
  z-index: -1;
  height: 1000%;
}

＆＃13;

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是<table>或更好， FlexBox 的完美用例：

预览

<强>段：

.flex-container {
  margin: 10px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  border: 1px solid #999;
}

.flex-item {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  border: 1px solid #99f;
  margin: 5px;
  min-width: 30%;
}

<div class="flex-container">
  <div class="flex-item">Hello</div>
  <div class="flex-item">Hello</div>
  <div class="flex-item">Hello</div>
  <div class="flex-item">Hello</div>
</div>

<div class="flex-container">
  <div class="flex-item">Hello</div>
  <div class="flex-item">Hello</div>
  <div class="flex-item">Hello</div>
</div>

<div class="flex-container">
  <div class="flex-item">Hello</div>
  <div class="flex-item">Hello</div>
</div>

相同的CSS，无限的条目。