1

http://jsfiddle.net/bobbyfrancisjoseph/2EfLz/1/

以下は私が書いたコードです。問題は、結果のページで、ラッパーdivがネストされたdivをコンテナー化していないように見えることです。

4

5 に答える 5

3

「オーバーフロー：非表示」を追加します。ラッパーの定義に。

于 2012-04-30T12:07:12.687 に答える
2

ボディ要素#left-container、、、#right-containerはフロートされているため、通常のコンテンツフローから削除されます。したがって、フロートされた要素を適切に含めるには、「clearfix」が必要になります。これは2つの方法で実行できます。

1つは、次のようなclearfixを使用することで、インラインであり、コンテナーからオーバーフローする可能性のある絶対位置の要素を混乱させないため、私の推奨するアプローチです。

#wrapper:before, #wrapper:after {
    content:"";
    display:table;
}

#wrapper:after {
    clear:both;
}

#wrapper {
    *zoom:1; /* ie7 hasLayout fix */
}

または、コンテナで2つ使用overflow:hiddenします。#wrapperこれは、コンテナからオーバーフローする可能性のある要素を配置した可能性があるため、回避しようとpositition:absoluteする方法です。そのため、その方法ではカットオフされます。3番目のオプションは、コンテナーの最後にを追加することですが、これは厄介なアプローチです:)。

最初の（そして私の好みの）アプローチによるデモhttp://jsfiddle.net/2EfLz/2/

于 2012-04-30T12:07:52.843 に答える
1

あなたはオーバーフローを与えます：あなたの#wrapperに隠されています

#wrapper
{
    margin:0 auto;
    position:relative;
    background-color:#999;
    width:960px;
    border:dashed #006 thick;
    overflow:hidden;


}

http://jsfiddle.net/2EfLz/3/

于 2012-04-30T12:10:32.153 に答える
1

overflow:hidden;ラッパースタイルで使用します。

于 2012-04-30T12:11:51.810 に答える
1

この位置のようなものを試してください：絶対;

            #wrapper
           {
            margin:0 auto;
            position: absolute;
            background-color:#999;
            width:960px;
            border:dashed #006 thick;

         }
于 2012-04-30T12:58:33.167 に答える