为什么这个 div 在这个短代码中排在另一个 div 后面？

Question

我怀疑知道为什么会这样，但我需要有关此问题的专业知识来解决它，因为我需要保持 background-image...

我第一个 parent div 和他 children:

<div id="wtf" style="margin-top:5%; display:block; float:left; width:auto; height:auto; background:whitesmoke;">
                          <div style="width:33%;">
                              <div class="block">
       some content    

                              </div>
                              </div>


                          <div style="float:left; width:33%;">
                                <div class="block">
some content                   

                                </div></div>




                               <div style="float:left; width:33%;">
                                <div class="block">
       some content       


                                </div></div> 



                          </div>

紧接着这个 div 应该被转置，但这个 div 隐藏在第一个后面。我怀疑这是因为 div 不包含任何固体 object 因为它只有背景作为图像而不是 img:

<div id="banner_index" class="animated fadeIn">
           <br><br>
           <span class="banner_message">
   some msg
           </span>

            <span class="banner_message">
            some msg
           </span>


           <span class="banner_message">
            some msg
           </span>

           <span class="banner_message">
            some msg
           </span>

           <span class="banner_message">
            some msg
           </span>

           <span class="banner_message">
            some msg
           </span>

           <span class="banner_message">
            some msg
           </span>

          <span class="banner_message">
            some msg
           </span>



              <a href="category?${category.id}" class="banner_button"><fmt:message key='SOMEKEY'/></a>


       </div>

CSS:

    #banner_index{
    border-bottom:2px solid whitesmoke;
    width:100%;
    min-height:700px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-image: url("../images/category/478969.jpg");
background-color:black;
    color:whitesmoke;
}

    .banner_message{
        font-size:x-large;
        padding:1%;
        font-family:print clearly;
        text-transform: uppercase;
        display:block;

    }

Answer 1

你好现在定义你的#banner_indexclearboth;和#wtf{width:100%;}

#banner_index{clear:both;}

#wtf{width:100%;}        
#banner_index{
    border-bottom:2px solid whitesmoke;
    width:100%;
      clear:both;
    min-height:700px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-image: url("../images/category/478969.jpg");
background-color:black;
    color:whitesmoke;
}

    .banner_message{
        font-size:x-large;
        padding:1%;
        font-family:print clearly;
        text-transform: uppercase;
        display:block;

    }

<div id="wtf" style="margin-top:5%; display:block; float:left;  height:auto; background:whitesmoke;">
                          <div style="width:33%;">
                              <div class="block">
       some content    

                              </div>
                              </div>


                          <div style="float:left; width:33%;">
                                <div class="block">
some content                   

                                </div></div>




                               <div style="float:left; width:33%;">
                                <div class="block">
       some content       


                                </div></div> 



                          </div>

<div id="banner_index" class="animated fadeIn">
           <br><br>
           <span class="banner_message">
   some msg
           </span>

            <span class="banner_message">
            some msg
           </span>


           <span class="banner_message">
            some msg
           </span>

           <span class="banner_message">
            some msg
           </span>

           <span class="banner_message">
            some msg
           </span>

           <span class="banner_message">
            some msg
           </span>

           <span class="banner_message">
            some msg
           </span>

          <span class="banner_message">
            some msg
           </span>



              <a href="category?${category.id}" class="banner_button"><fmt:message key='SOMEKEY'/></a>


       </div>

Answer 2

将margin-left: -159px;margin-top: 16px;添加到div 这是更新后的fiddle

为什么这个 div 在这个短代码中排在另一个 div 后面？

Why does this div go behind another div in this short code?

html

css

background-image