Html 内容超出了div

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

是的，我知道关于这件事的问题很多，尽管我尝试过的解决方案都不适合我

我所尝试的：

• 溢出：隐藏在“#信息框”上
• 一个div，其中“clear:tware”作为“#infoBox”中的最后一个节点
• 位置：在“#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>

#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

如图所示，元素漂浮在主容器外：

---

图形div绝对位于静态定位的div内。您可能需要添加位置：相对于您的#infoBox规则。这将导致绝对定位在#信息框边界框内生效，而不是外部框。

图形div绝对定位在静态定位的div内。您可能需要添加位置：相对于您的#infoBox规则。这将导致绝对定位在#infoBox边界框内生效，而不是在外部生效。

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

---

您必须手动设置容器的大小以补偿此影响，或者使用浮动。如果确实使用浮动，请确保清除浮动，以允许正常的文档流继续。

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

---

您必须手动设置容器的大小以补偿此影响，或者使用浮动。如果您确实使用浮动，请确保清除浮动，以便继续正常的文档流。

谢谢您的回答。尝试添加位置：相对于#信息框，但仍然相同：/你可以采取很多方法——很难说没有看到文档和规则的完整扩展，但是你需要绝对定位那些div，特别是使用负的top和left值，这很奇怪。通过在#信息框中静态放置div并添加边距和/或填充（和/或溢出设置为“自动”或“隐藏”），您可能可以完成所需的操作，具体取决于您希望它们的布局方式。很难说这里的视觉目标是什么。谢谢你的回答。尝试添加位置：相对于#信息框，但仍然相同：/你可以采取很多方法——很难说没有看到文档和规则的完整扩展，但是你需要绝对定位那些div，特别是使用负的top和left值，这很奇怪。通过在#信息框中静态放置div并添加边距和/或填充（和/或溢出设置为“自动”或“隐藏”），您可能可以完成所需的操作，具体取决于您希望它们的布局方式。很难说这里的视觉目标是什么。