html - div背景颜色未设置所有区域

Question

我有一个包含 3 个 div 的 div。我的问题是当我将背景颜色设置为第一个 div 时，第一个 div 内的 div 没有应用背景。

我的代码是，

<div class="how_next">
    <div class="how_next_single" align="center">
        <p><img src="images/livemonitoring.png" /></p>
        <p>Heading</p>
        <h3>Description</h3>
    </div>

    <div class="how_next_single" align="center">
        <p><img src="images/livemonitoring.png" /></p>
        <p>Heading</p>
        <h3>Description</h3>
    </div>

    <div class="how_next_last" align="center">
        <p><img src="images/livemonitoring.png" /></p>
        <p>Heading</p>
        <h3>Description</h3>
    </div>
</div>

我的风格是，

.how_next {
    height:auto;
    background-color:#E9E9E9;
    padding:15px;
    font-size:16px;
    font-weight:bold;
    margin-top:10px;
}
.how_next_single {
    width:32%;
    float:left;
}
.how_next_last {
    width:32%;
    float:right;
}

现在输出是

我的编码有什么问题。有没有解决办法。

Answer 1

当您在包装器中使用 float 元素时，您需要清除它们。有多种方法可以使用 clearfix 技术、使用 overflow:hidden 等清除它们。

所以，你需要做的只是:

.how_next {
   overflow: hidden;
}

您可能对这些问题感兴趣:

what is clearfix

which method of clearfix is best

clearfix with twitter bootstrap

all about floats