如何使父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

需要绿色框包装的事实,我想要实现的是黄色框具有与绿色框的组合宽度相同的宽度.期望的结果:

Answer 1

我认为用纯 CSS 不可能做你想做的事。悬空空间之所以存在，是因为这就是剩余的空间。该框只是位于下方，因为上面没有空间，您无法缩小黄色标题，因为它不“知道”绿色框不适合的事实。我尝试了一些技巧，但无法让它发挥作用。最安全的选择是选择 JS。

然而，如果您能够灵活地稍微改变您的设计，那么您可能会发现以下一些替代方案值得检查。

1. 完全不指定尺寸

你可以让它flex-box做它的事情。JSFiddle。适用于各种元素，但它们会变得太大或太小，具体取决于父元素的大小和子元素的数量。

2. 留出空间

flex-box为了再次救援，您可以使用justify-content: space-between正确地将标题从最左边的框保持到最右边的框，但在之间引入空格。JSFiddle。