div background color not setting all area

后端 未结 5 1465
我在风中等你
我在风中等你 2021-01-26 05:00

I have a div containing 3 div inside it. My problem is when am setting background color to first div, the div inside first div is not applying the background.

My code is

相关标签:
5条回答
  • 2021-01-26 05:15

    What about create a new class style:

    .clearfix{
       clear:both;
    }
    

    Then add it to the end of your 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>
    

    And don't use such a things like align="center" it's not a proper way of centering things due to HTML5 standards. All those things should be achieved by CSS, you shouln't write any styles in your HTML tags, that's a good practice.

    Hmmm, I also think that you don't need height:auto in your how_next style.

    Why clear:both?

    You must do this in your case, because you're using floating elements, which won't make your parent expand by them.

    Have a look! http://www.w3schools.com/cssref/pr_class_clear.asp

    0 讨论(0)
  • 2021-01-26 05:27

    Try to add:

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

    and give him style:

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

    after the .how_next_last div

    Example:

    <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>
    
    0 讨论(0)
  • 2021-01-26 05:28

    See this is the perfect answer of your query.

    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
     }
    

    Working Link

    0 讨论(0)
  • 2021-01-26 05:31

    When you use floating elements inside a wrapper you need to clear them. There are various ways to clear them using clearfix technique, using overflow:hidden, etc.

    So, you need to do just:

    .how_next {
       overflow: hidden;
    }
    

    You may have an interest in these q/a:

    what is clearfix

    which method of clearfix is best

    clearfix with twitter bootstrap

    all about floats

    0 讨论(0)
  • 2021-01-26 05:36

    This is your perfect answer for 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;
       }
    
    0 讨论(0)
提交回复
热议问题