3

このページでは、いくつかの が上下にdiv並んでいます。メニューバーには次の CSS があります。

    #menu-bar {
        border-left:3px white solid;
        border-right:3px white solid;
    }

そしてそれはうまくいきます。次divの「コンテンツ」には、同じ境界線が定義されていますが、表示されません。私が考えることができる唯一の大きな違いは、「コンテンツ」 divに列用の2つのフローティングdivがあることですが、これはあまり重要ではないと思います.

境界線が表示されない理由はありますか?
その他の建設的な批判も歓迎します。

(テスト目的で、CSS は HTML ファイルに含まれています。)


mkkの更新overflowが解決策のようですが、下部に小さな問題があります。更新されたページでは、 「コンテンツ」 divを設定margin-bottomしているにもかかわらず、境界線がフッター div まで下がらず、フッターの上余白を負の値に設定することで修正できますが、それは適切な方法ではないようです...margin-top

4

2 に答える 2

2

div#content高さがないため、境界線はありません。これを CSS に追加して、内側の div と同じ高さにします。

#content:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  line-height: 0;
}
于 2012-12-30T10:57:53.293 に答える
1

それは重要です！#div 内にフローティング要素しかない場合、高さと幅は定義されません。overflow: hidden期待どおりに機能させるには、プロパティを #div [あなたの場合は #content ] に追加する必要があります。

たとえば、firebug や chrome 開発者ツールを使用すると、これが正しいことがわかります。コンテンツにカーソルを合わせて強調表示されていないことを確認し、overflow: hidden を追加して、これで問題が解決したことを確認します。

于 2012-12-30T10:52:36.077 に答える