div背景颜色未设置所有区域答案

【问题标题】：div background color not setting all areadiv背景颜色未设置所有区域
【发布时间】：2015-11-30 18:53:58
【问题描述】：

我有一个 div，其中包含 3 个 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;
}

现在输出是

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

【问题讨论】：

标签： html css

【解决方案1】：

当您在包装器中使用浮动元素时，您需要清除它们。有多种方法可以使用 clearfix 技术清除它们，使用溢出：隐藏等。

所以，你只需要这样做：

.how_next {
   overflow: hidden;
}

您可能对这些 q/a 感兴趣：

what is clearfix

which method of clearfix is best

clearfix with twitter bootstrap

all about floats

【讨论】：

请注意这个解决方案，在某些时候，如果任何包含的元素想要超过父元素的边界，它将无法 - 例如一个下拉菜单

【解决方案2】：

看到这是您查询的完美答案。

CSS：

.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
 }

工作Link

【讨论】：

【解决方案3】：

创建一个新的类样式怎么样：

.clearfix{
   clear:both;
}

然后将其添加到 HTML 的末尾：

<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 class="clearfix"></div>

</div>

并且不要使用像 align="center" 这样的东西，由于 HTML5 标准，这不是一种正确的居中方式。所有这些事情都应该通过 CSS 来实现，你不应该在 HTML 标签中编写任何样式，这是一个很好的做法。

嗯，我也认为您的 how_next 样式中不需要 height:auto。

为什么要明确：两者？

您必须在您的情况下这样做，因为您使用的是浮动元素，这不会使您的父级被它们扩展。

看看吧！ http://www.w3schools.com/cssref/pr_class_clear.asp

【讨论】：

【解决方案4】：

尝试添加：

 <div class="clear"></div>

并赋予他风格：

<style>
   .clear{both;with:100%;}
</style>

在 .how_next_last 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 class="clear"></div>
</div>

【讨论】：

【解决方案5】：

这是你对 css 的完美答案。

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

【讨论】：