Html Css容器Div大小

我遇到了一个问题，当一个DIV强制其子DIV向下移动时，如何调整其大小以适应内容

我在示例中尝试的是将容器div的宽度设置为子容器的宽度，这样我就可以使容器在页面上居中

HTML

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

当您查看示例时，容器正在扩展到100%，同时在最右边的子容器和容器之间留有空间。

---

然后将.box样式的宽度设置为100px，并将#容器的宽度设置为组合宽度。

我将使用容器上的显示表，添加100%的宽度以保持布局大小。使用方框上的显示表格单元格

代码如下：

#container {
text-align: left;
border: 1px solid red;
display: table;
padding:0;
margin:0;
width:100%;
}
.box {
display:table-cell;
height:100px;
border:1px solid blue;
}

在这种情况下可能会有所帮助

要创建flexbox环境，必须首先将父元素（在您的情况下是

容器

）设置为

显示：flex

---

对于flex项目，您只需设置

最小宽度

，但我建议您也可以查看flexbox提供的所有精彩功能

您可以向容器中添加最大宽度或宽度：%s。问题是，我需要div能够响应页面大小。这可能会重复。浮动：无导致所有内容都停留在同一行，而不是向下移动到下一行。移除浮动无会导致它出现与以前相同的问题。那么还需要什么？我需要这些项目能够移动到下一行不同的监视器。当第一行有更多适合的项目时，它会将项目向下包装，在最上面一行的右侧和div之间留下空白。放置边距：0px；在图像上。要包裹图像，请将特定宽度设置为小于图像的组合宽度。

#container {display:table;}
.box {display:table-cell; float:none; vertical-align:top;}

#container {
text-align: left;
border: 1px solid red;
display: table;
padding:0;
margin:0;
width:100%;
}
.box {
display:table-cell;
height:100px;
border:1px solid blue;
}