html - 主 Div 背景颜色未出现在子 Div 上

Question

我有一个问题。我给了三个DIV。第一个是主要的，其他两个是 child 。 在两个 child 中，一个 child 是左边的，一个 child 是右边的。 我已经将主要 div 背景颜色设置为白色，但它没有出现在两个 child 的背景颜色上。

很简单，只要主div关闭，我希望主div的背景颜色应该出现在子div上。下面是我的代码

<div style="background-color:#FFFFFF;">
Its showing here only white color

<div style="width:250px;  float:left; padding:10px;">
<p>hello its sam </p>
<p>hello its sam </p>
<p>hello its sam </p>
<p>hello its sam </p>
<p>hello its sam </p>
</div>

<div style="width:660px;   border-left: 1px solid #CCC; padding:10px; float:right;">
<p>Yes its sam</p>
<p>Yes its sam</p>
<p>Yes its sam</p>
<p>Yes its sam</p>
<p>Yes its sam</p>
</div>

</div>

</body>

Answer 1

您需要清除 float 。

在 float 之后添加这一行将解决问题。

<div style="clear: both;"></div>

新的 HTML:

<div style="background-color:#FFFFFF;">Its showing here only white color
    <div style="width:250px;  float:left; padding:10px;">
        <p>hello its sam</p>
        <p>hello its sam</p>
        <p>hello its sam</p>
        <p>hello its sam</p>
        <p>hello its sam</p>
    </div>
    <div style="width:660px;   border-left: 1px solid #CCC; padding:10px; float:right;">
        <p>Yes its sam</p>
        <p>Yes its sam</p>
        <p>Yes its sam</p>
        <p>Yes its sam</p>
        <p>Yes its sam</p>
    </div>
    <div style="clear: both;"></div>
</div>

Demo Here

了解有关 float 和清除 float 的更多信息 here .

---

您也可以使用 overflow，不过我会使用 clear: both;。

Demo Using Overflow Here

注意:我做了内联样式来匹配你的代码