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 内に絶対に配置されます。おそらく必要なのは、 #infoBox ルールに position:relative を追加することです。これにより、外側のバウンディング ボックスではなく、#infoBox バウンディング ボックス内で絶対配置が有効になります。

于 2013-01-28T19:47:43.177 に答える
2

絶対配置では、レイアウトから要素が削除されます。そのため、親コンテナーは要素の大きさ (または場所さえも) を認識できなくなります。

これを補うためにコンテナのサイズを手動で設定するか、フロートを使用する必要があります。フロートを使用する場合は、必ずフロートをクリアして、通常のドキュメント フローを続行できるようにしてください。

于 2013-01-28T19:48:57.273 に答える