Question

我怀疑知道为什么会这样，但我需要有关此问题的专业知识才能修复它，因为我需要保留背景图像......

我和他的孩子有第一个父母div：

img

在这个div应该被转置之后，但是这个div隐藏在第一个div之后。我怀疑这是因为div不包含任何实体对象，因为它只有背景图像而不是<div id="banner_index" class="animated fadeIn"> some msg some msg some msg some msg some msg some msg some msg some msg <a href="category?${category.id}" class="banner_button"><fmt:message key='SOMEKEY'/></a> </div>：

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

    }

CSS：

{{1}}

Answer 1

您好现在定义 #banner_index clear both;和#wtf{width:100%;}

#banner_index{clear:both;}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

为什么这个div在这个短代码中落后于另一个div？

2 个答案: