html - 包裹元素上的 CSS 容器宽度

Question

我正在尝试让容器 div 扩展以环绕多个内联 block 元素。

一切正常，直到容器缩小或我添加更多元素。

.top {
  width: 80%;
  background-color: red;
}
.container {
  background-color: gray;
  display: inline-block;
}
.box {
  display: inline-block;
  background-color: blue;
  height: 100px;
  width: 100px;
}

<div class="top">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

这是一个例子。 https://jsfiddle.net/8fhjaf6z/11/

灰色的 .container 将盒子包裹在其中，直到您添加更多盒子或缩小 .top 容器。那时盒子换行并移动到下一行，这是我想要的，但现在灰色 .container 填充红色 .top 容器留下一堆空白空间权利。

我也试过 float .box 元素，但得到了相同的结果。

Answer 1

填充移动到下一行的框所产生的空间的一种可能方法是将 .container 的显示设置为内联。现在您只有框后面的灰色背景。使用顶部填充，您可以让灰色背景占据框的整个高度(作为为内联元素设置高度的解决方法，这对于 height 属性是不可能的):

.top {
  width: 80%;
  background-color: red;
  font-size: 0;
}
.container {
  background-color: gray;
  display: inline;
  padding: 105px 0 0 0;
}
.box {
  display: inline-block;
  background-color: blue;
  height: 100px;
  width: 100px;
  margin: 0 0 5px 5px;
}

<div class="top">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>