Question

我有一个担忧。我给了三个DIV。首先是主要的，其他两个是孩子。在两个孩子中，一个孩子是左侧，一个孩子是右侧。我给主要div背景颜色为白色，但它没有出现在孩子的背景颜色上。

简单，我希望主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

你需要清理你的花车。

浮动后添加此行将解决问题。

<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

详细了解浮动广告并将其清除here。

你也可以使用溢出，我只使用clear: both;。

Demo Using Overflow Here

注意：我已完成内联样式以匹配您的代码

Answer 2

你也可以节省一个div，你有两种可能性：

添加溢出：隐藏到父div（带背景颜色）

结果html：

    <div style="background-color:#FFFFFF; overflow:hidden">
    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>

结果Jsfiddle

或者您可以添加＆＃34; clearfix＆＃34; class - .cf -more short

     /**
     * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    contenteditable attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that are clearfixed.
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */
    .cf:before,
    .cf:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .cf:after {
        clear: both;
    }

    /**
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */
    .cf {
        *zoom: 1;
    }

解释here

你只需将cf class添加到主div。

主Div背景颜色不出现在Div Div上

2 个答案: