DIV容器大小与包装浮动内容的宽度

Question

我正在尝试创建一个宽度仅为内容大小的容器div.通过float: left在容器上使用,我可以正确地使用该部件.这是我到目前为止所拥有的.

HTML

<div class='container'>
    <div class='floater' style='background-color: #880000'>1</div>
    <div class='floater' style='background-color: #008800'>2</div>
    <div class='floater' style='background-color: #000088'>3</div>
</div>

CSS

.container {
background-color: #123456;
float: left;
}

.floater {
width: 300px;
height: 100px;
float: left;
}

我遇到的问题是当浮动div被包裹在容器内时.我确实希望它们换行,但我也希望容器div的宽度相应地调整大小.例如,如果您的浏览器宽度为1000px,则一切正常,容器为900px.但是如果你将浏览器缩小到750px宽,那么第3次潜水就会换到下一行,但容器的宽度是750px; 不是我想要的600px.

我想要的行为可能吗？如果是这样,怎么样？

我为每个人做了一个小提琴,看看我在说什么点击这里

Answer 1

这是因为 .container 元素的宽度是由页面或包含元素的宽度决定的。包含元素可能是也可能不是 html 元素，具体取决于浏览器。基本上，.floater 元素的固定宽度为 300px x 100px（显式设置），而 .container 元素的宽度和高度则隐式设置。尝试这样的事情。

.container {width: 90%;}

这将导致 .container 元素的宽度始终小于包含元素的宽度。因此，如果包含元素是宽度为 1000px 的 html，则 .containing 元素的宽度将是 1000px 的 90%，即 900px。如果 html 元素是 750px，.container 元素将是 750px 的 90%，即 675px。

此外，您的代码可能会或可能不会出现问题，具体取决于 .container 元素上方、下方和内部的内容，因为您尚未清除浮动。尝试这样的事情

.container {overflow: auto;}