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:left到 div.bottom 边距将起作用。如果您不想使用浮动，padding-top{20px) 将像 Koby 提到的那样工作。

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

于 2012-05-04T20:40:24.847 回答
0

使用 padding-top 而不是 margin-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“浮动”规范的解释。或者，您可以使用自清除浮动方法。

于 2012-05-04T20:14:04.000 回答
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 回答