0

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

是的，我知道 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。

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

4

2 回答 2

3

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

于 2013-01-28T19:47:43.177 回答
2

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

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

于 2013-01-28T19:48:57.273 回答