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

Question

我有一个带有背景颜色的display: inline-block; div 容器。

在这个 div 中，我添加了更多的矩形 div 与 float:left 并排。

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

左边的图像是它目前的样子。右边的图像是它应该看起来的样子；父母的背景应该收缩围绕它的孩子：

这是下面的jsfiddle：

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

<div class="bigDiv">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

创建“伪背景”

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

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

• 每个子 div 都有一个 ::before 伪元素，它将创建一个“伪背景”（z-index: -1 将其移动到 div 背景后面）

• 伪背景以top、left 和right 定位，负值会将它们拖到 div 填充中。

• height: 1000% 可以是任何荒谬的数字，只要它足够高以覆盖每一行 div。多余的部分被父 div 上的overflow: hidden 干净地切断

这是每个 div 的样子，黑色边框是父级的边缘，也就是黄色“伪背景”被切断的地方：

变成这样：

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

示例

调整它的大小，看看“伪背景”如何在所有宽度下工作。

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

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

</div>

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，无限的条目。