我正在尝试创建一个宽度仅为内容大小的容器div.我通过在容器上使用float：left来使该部分正常工作.这是我到目前为止所拥有的.
<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.
我想要的行为可能吗？如果是这样,怎么样？
我为每个人做了一个小提琴,看看我在说什么Click Here
解决方法
这是因为.container元素的宽度由页面宽度或包含元素决定.取决于浏览器,包含元素可以是或可以不是html元素.基本上你有.floater元素的固定宽度为300px x 100px(设置明确),并且.container元素的宽度和高度设置为implicity.尝试这样的事情.
.container {width: 90%;}
这将导致.container元素的宽度始终小于包含元素的宽度.因此,例如,如果包含元素是html,其宽度为1000px,则.containing元素的宽度将为1000px的90％,即900px.如果html元素是750px,则.container元素将是750px的90％,即675px.
此外,您可能会或可能不会对代码有问题,具体取决于您在.container元素上方,下方和内部的内容,因为您还没有清除浮动.尝试这样的事情
.container {overflow: auto;}
