Question

我有以下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与内容包装容器有一些余量？

你可以看到它here，没有应用保证金。

Answer 1

如果您将float:left添加到div.bottom，则保证金将起作用。如果你不想使用float，padding-top {20px）就会像Koby所说的那样工作。

同样在您的HTML中，您有<div class="contentWrapper">但在CSS #content_wrapper中..将其更改为.content_wrapper {

Answer 2

将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/

Answer 3

我会稍微改变一下，使用一个单独但可重复使用的“清除”元素：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”规范的解释。或者，您可以使用self-clearing floats方法。

Answer 4

我会稍微改变一下，使用一个单独但可重复使用的“清除”元素：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”规范的解释。或者，您可以使用self-clearing floats方法。

保证两个容器中的保证金未被应用

4 个答案: