Question

我试图让容器div扩展以包围几个内联块元素。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

我也尝试过浮动.box元素，但得到相同的结果。

Answer 1

填充由移动到下一行的框创建的空间的一种可能方法是将.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; }的显示设置为内联。现在你只有框背后的灰色背景。使用顶部填充，您可以使灰色背景占据框的整个高度（作为将高度设置为内联元素的解决方法，这对于height属性是不可能的）：

<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>

Request

包装元素上的CSS容器宽度

1 个答案: