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

我正在尝试创建一个宽度仅为内容大小的容器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.

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

我为每个人做了一个小提琴,看看我在说什么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;}

原文地址：https://www.jb51.cc/css/215774.html