css - 带有 float 元素的背景色

Question

我想在主 DIV 中放置 2 个垂直 DIV 时遇到问题。 background-color 值不适用于主 DIV。我想我必须看到一些红色背景的部分。
请看一下它的jsFiddle并帮助我解决它。

Answer 1

尝试使用 clear:both CSS 属性添加一个空的 div，或者为你的主 div 设置一个高度。

<div id="content">
    <div id="float-left">Some Text floating left</div>
    <div id="float-right">Some Text floating right</div>
    <div id="clear"></div>
</div>

CSS 代码

#content {
    background-color:red; /* The background you want */
    width:500px; /* Demo: not important */
}

#float-right {
    float:right;
    width:300px;
    padding-right:20px;
    line-height:200%;
    background-color:#f2f2f2
}

#float-left {
    float:left;
    width:50px;
    background-color:#e1e1e1
}

#clear{
   clear:both
}

See Demo