0

次の HTML コードがあります。

<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;}
div.bottom {clear:both; margin-top:20px;}

そして次の質問です。

一番下の div にコンテンツ ラッパー コンテナからのマージンを持たせるにはどうすればよいですか?

マージンが適用されていないことをここでライブで見ることができます。

4

4 に答える 4

1

float:leftdiv.bottom に追加すると、マージンが機能します。float を使用したくない場合、padding-top{20px) は Koby が述べたように機能します。

また、HTML にはあります<div class="contentWrapper">が、CSS では #content_wrapper.. を .content_wrapper {

于 2012-05-04T20:40:24.847 に答える
0

HTML を次のように変更します。

<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 style="clear:both;" />
    <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;}
div.bottom {margin-top:20px;}

参照: http://jsfiddle.net/L8YN6/11/ </p>

于 2012-05-04T20:11:22.987 に答える
0

margin-top の代わりに padding-top を使用するのはどうですか? div 20px のコンテンツを一番下にプッシュします。

div.bottom {クリア: 両方; パディングトップ:20px;}

于 2012-05-04T20:13:43.293 に答える
0

別の、しかし再利用可能な「クリア」要素を使用して、これに少し違ったアプローチをします: http://jsfiddle.net/L8YN6/16/

<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="clearing">&nbsp;</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;}
div.clearing { clear: both; line-height: 0; font-size: 0; overflow: hidden; }
div.bottom { margin-top: 20px }

私は、CSS の「float」仕様のさまざまなブラウザーの解釈に取り組むよりも、このアプローチを好みます。または、自動クリア フロートメソッドを使用することもできます。

于 2012-05-04T20:14:04.000 に答える