Question

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

我的代码是，

public abstract class Skel {

    public void body() {
        this.action1();
        this.action2();
    }

    abstract void action1();
    abstract void action2();

}

我的风格是，

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

现在输出

我的编码有什么问题。有没有解决方案。

Answer 1

在包装器中使用浮动元素时，需要清除它们。有各种方法可以使用clearfix技术清除它们，使用overflow：hidden等等。

所以，你需要做的只是：

.how_next {
   overflow: hidden;
}

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

what is clearfix

which method of clearfix is best

clearfix with twitter bootstrap

all about floats

Answer 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

Answer 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 =＆＃34; center＆＃34; 这样的东西，因为HTML5标准，它不是一种正确的方法。所有这些都应该通过CSS实现，你不能在HTML标签中写任何样式，这是一个很好的做法。

嗯，我还认为你的 how_next 风格不需要身高：自动。

为什么要清楚：两个？

您必须在您的情况下执行此操作，因为您正在使用浮动元素，这些元素不会让您的父级扩展它们。

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

Answer 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>

Answer 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;
   }

div背景颜色没有设置所有区域

5 个答案:

为什么要清楚：两个？