0

更多细节：我有两个 div，一个float:left，另一个float:right，而 parent 是clear:both这样我可以在页面上向下订购容器父母。具体的CSS在这里：

#content {
    margin-left:auto;
    margin-right:auto;
    width: 750px;
    margin-top:50px;
    position:relative;
}
.container-div {
    padding-top:7px;
    padding-bottom:10px;
    clear:both;
    background-color:#b0c4de;
}
.left-side {
    float:left;
}
.right-side
    float:right;
}

问题是background-color父级只覆盖了容器顶部的一小部分，而 chrome 检查器显示内容显然只是那部分。是什么赋予了？如何让 div 将浮动的 div 视为内容？

4

3 回答 3

2

你的 DOM 结构或多或少看起来像这样

<div class="container-div">
    <div class="left-side"></div>
    <div class="right-side"></div>
</div>

具有类容器的父 div 的宽度为 100%。现在您尝试在父 div 中浮动两个子 div，而不给它们任何宽度，默认情况下，子 div 将采用 100% 的宽度。因此，您必须将子 div 的宽度定义为最多 50%，然后只有您的浮动有效。

现在尝试以下代码

.clear{clear:both}

.container-div {
    padding-top:7px;
    padding-bottom:10px;
    background-color:#b0c4de;
}
.left-side {
    float:left;
    width=50%;
}
.right-side
    float:right;
    width=50%;
}

你的 DOM 应该是这样的

<div class="container-div">
        <div class="left-side">your left divs content</div>
        <div class="right-side">your right divs content</div>
        <div class="clear"></div>
</div>

现在您将看到一切都在正确的位置，并且 chrome 检查器将完美地显示它。

于 2012-05-22T20:35:38.757 回答
1

尝试添加overflow: auto父

于 2012-05-18T15:40:23.243 回答
1

父级.container-div应设置为display: inline-block;以吸收其子级的全部高度。

于 2012-05-18T15:45:19.053 回答