如何使父级div包裹（并缩小）其浮动的子元素？

Question

我有一个响应式布局，它由许多元素组成。这是代码的一个非常简化版本：

HTML：

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

CSS:

.parent {
  background: red;
  display:inline-block;
}

.child {
  background: green;
  width:100px;
  height:100px;
  float:left;
}

.header {
  background: yellow;
  width:100%;
  height:30px;
}

JSFiddle

我想要实现的是让头部（黄色框）与子div（绿色框）具有相同的宽度。当布局首次渲染时，它能够很好地工作。以下是来自JSFiddle的截图

但是，当屏幕尺寸变得更窄时，标题无法正确缩小，以下是较小区域的屏幕截图：

我花了几个小时试图弄清楚，但是我无法解决。挑战的一部分是，由于.NET动态渲染它们，我事先不知道绿色框的数量。

更新1

绿色框换行是期望的，我想要实现的是黄色框的宽度与绿色框的组合宽度相同。期望结果：

- Allan Spreys

---

为什么您不能将页眉的宽度设置为100％？ - Hynes

在上面的代码中，头部被设置为100%的宽度。 - Allan Spreys

Answer 1

我认为用纯CSS无法实现你想要的效果。悬挂的空间存在是因为这是剩余的空间。盒子只会下移，因为上面没有空间，黄色标题栏无法缩小，因为它并不知道绿色盒子无法适应。我尝试了一些hack方法，但无法使其正常工作。最安全的选择是使用JS。

然而，以下是一些替代方案，如果您可以稍微改变设计，可能会发现有价值。

1. 不指定大小

您可以让flex-box自己处理。 JSFiddle。适用于任何数量的元素，但它们会根据父级大小和子级数量变得过大或过小。

2. 允许中间有空隙

再次使用flex-box，您可以使用justify-content：space-between来保持标题栏从最左侧框到最右侧框的正确位置，但引入空间。JSFiddle。

- Lazar Ljubenović

---

谢谢您的回复。恐怕由于内容的特性，我们需要保持绿色框的宽度固定。 - Allan Spreys

那么你到底想要什么？如果父元素小于盒子数量乘以100像素，它们就不能保持在一行并且宽度为100像素。也许我误解了问题。 - Lazar Ljubenović

不好意思，它们换行的事实是完美的。我只想让标题（黄色框）的宽度与绿色框的组合宽度相同。让我更新问题。 - Allan Spreys

我明白了。我认为使用纯CSS无法实现您想要的效果。悬挂的红色空间存在是因为剩下这么多空间。盒子只会在下面，因为上面没有空间，您不能缩小黄色标题，因为它不知道绿色框不适合。我尝试了一些技巧，但无法使其正常工作。最安全的方法是使用JS；虽然我很想看到纯CSS的解决方案。 - Lazar Ljubenović

谢谢你，Lazar，我也得出了同样的结论。这有点让人烦恼，因为第一次呈现时黄色框的宽度是正确的，所以它在某个时刻知道绿色框的组合宽度，但不知道何时开始换行。 - Allan Spreys