内容超出 div答案

【问题标题】：Content goes outside div内容超出 div
【发布时间】：2013-01-12 06:07:42
【问题描述】：

正如标题所暗示的，我的问题是内容没有留在主容器内（没有使用浮动）。

是的，我知道 Stack 上有很多关于这个问题的问题，尽管我尝试过的解决方案都不适合我。

我尝试过的：

溢出：隐藏在“#infoBox”上
“#infoBox”中最后一个节点为“clear:both”的 div
位置：在“#infoBox”的 CSS 中相对

HTML：

<div id="infoBox">
    <div id="statsDiv">
        <div id="nrOfCrimes">
            <div id="nrOfCrimesGraphDiv">
                //... code for jQuery Visualize (graphs)
            </div>
            <ul>
                //... li's ...
            </ul>
        </div>
        <div id="crimesPerMonth">
            <div id="crimesPerMonthGraphDiv">
                //... code for jQuery Visualize (graphs)
            </div>
            <ul>
                //... li's ...
            </ul>
        </div>
    </div>
</div>

CSS：

#infoBox {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 89%;
  background: #fbfbf7;
  margin: 0px auto;
  margin-bottom: 40px;
  padding-left: 40px;
  padding-right: 40px;
}

#nrOfCrimesGraphDiv {
  position: absolute;
  top: -100px;
  left: 300px;
}

#crimesPerMonthGraphDiv {
  position: absolute;
  top: -80px;
  left: 300px;
}

注意：没有为“#statsDiv”、“#nrOfCrimes”和“#crimesPerMonth”指定 CSS。

正如您在这张图片上看到的，元素漂浮在主容器之外：

【问题讨论】：

标签： html css css-float overflow positioning

【解决方案1】：

您的图表 div 绝对定位在具有静态定位的 div 内。您可能想要添加 position:relative 到您的 #infoBox 规则。这将导致绝对定位在 #infoBox 边界框内生效，而不是在外部边界框内。

【讨论】：

感谢您的回答。尝试添加位置：相对于#infoBox，但仍然相同。 ://
您可以采取多种方法 - 很难说没有看到文档和规则的完整扩展，但是您需要绝对定位这些 div 是很奇怪的，尤其是负的顶部和左侧值。您应该能够通过#infoBox 内的静态定位 div 并添加边距和/或填充（和/或溢出设置为自动或隐藏）来完成您想要的操作，具体取决于您希望它们的布局方式。很难说这里的视觉目标是什么。

【解决方案2】：

绝对定位会从布局中移除一个元素 - 因此父容器不再知道该元素有多大（甚至它在哪里）。

您要么必须手动设置容器的大小来弥补这一点，要么使用浮动。如果您确实使用浮动，请务必清除浮动以允许正常的文档流程继续。

【讨论】：