css - DIV 容器大小到包裹的 float 内容的宽度

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

我遇到的问题是当 float div 被包裹在容器内时。我确实希望它们换行，但我也希望容器 div 的宽度相应地调整大小。例如，如果您的浏览器宽度为 1000 像素，则一切正常，容器为 900 像素。然而，如果你将浏览器缩小到 750px 宽，第三次跳转到下一行，但容器是 750px 宽；不是我想要的 600px。

我想要的行为是可能的吗？如果是，怎么办？

做了一个Fiddle给大家看看我在说什么Click Here

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 元素上方、下方和内部的内容，因为您尚未清除 float 。尝试这样的事情

.container {overflow: auto;}