允许 div 展开或移过容器答案

【问题标题】：Allowing div to expand or move past container允许 div 展开或移过容器
【发布时间】：2011-01-20 10:49:54
【问题描述】：

我有一个问题（代码是动态的，因此难以打印 - 我希望这很简单）当父容器 div 包含 3 个向左浮动的 div 元素时，如果第 3 个 div 超出页面主体（即浏览器的宽度）它换行到下面。

我希望它浮动：不管它是否超过“浏览器结束”。这可能吗？

示例代码：-

<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>

其中所有的 div 左、中、右都是浮动的：left;

然而，如果 divCenter 的宽度超出浏览器宽度，#divLeft 会中断并进入到下方。

非常感谢任何帮助！

【问题讨论】：

如果容器有固定宽度，那么我认为这是默认行为
这些 div 是否有任何边距、内边距或边框？如果是这样，每个是多少？

标签： css html css-float

【解决方案1】：

确定的最佳方法是在此处为您的div 设置固定宽度。

An example here

#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}

如果您想应用背景或边框，请不要忘记容器上的 overflow:auto，否则它不会在您的 div 下。

【讨论】：

你说的很对，它确实解决了这个问题。我没有的原因是包装需要扩展到动态宽度，但我每次需要它时都会将它交给具有设定宽度的构建器。所以似乎工作。非常感谢。

【解决方案2】：

似乎 div 不适合容器 div，最后一个漂浮在它们下面。这就是浮动的工作原理。你必须安排它们的宽度。

【讨论】：