0

簡略化するためにコードを簡略化しましたが、ここに私のコードを示します。

<div class = "content_wrapper">
    <div class = "left_side">
        LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
    </div>
    <div class = "right_side">
        RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
    </div>
    <div class = "bottom">
        bottom content
    </div>
</div>

そしてcssは次のとおりです。

#content_wrapper
{
    width: 960px;
    margin: 0 auto;
}

div.left_side{margin:0px; width:100px; padding:0px 0 0 5px; float:left;}
div.right_side{margin:0px; width:100px; padding:0px 0 0 5px; float:right;}

ここでライブを見ることができます: jsfiddle。

右と左の 2 つのコンテナーの真下に下部コンテンツを作成するにはどうすればよいですか? divがそれらの後にある場合、なぜこれら2つの真ん中に入るのかわかりません。

4

2 に答える 2

2

このCSSを追加

.bottom{クリア:両方;}

于 2012-05-04T05:25:32.450 に答える
2

http://jsfiddle.net/L8YN6/2/

以下を追加するとうまくいくと思います：

div.bottom {clear:both;}
于 2012-05-04T05:28:08.770 に答える