html - 内容超出 div

Question

正如标题所暗示的，我的问题是内容没有留在主容器内(没有使用 float )。

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

我尝试过的:

• 溢出:隐藏在“#infoBox”上
• 将“clear:both”作为“#infoBox”中最后一个节点的 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。

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

Answer 1

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