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

我怀疑知道为什么它正在发生，但我需要在这个问题上解决它，因为我需要保持背景图像的专业知识......为什么这个div在这个短代码中落后于另一个div？

我与他的孩子这第一个父DIV：

<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的后面。我怀疑这是因为DIV不包含任何固体物体，因为它只有一个背景图像，而不是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; 

    }

来源

2015-10-05 Jane Nice

请问你的输出是什么样子？ – Webruster

@Webruster：'＃banner_index'隐藏在'＃wtf' div后面，特定的#wtf div停止在'span'开始的位置，因为它背景因为忽略了'＃banner_index'的第一部分。 –

这是你所期待的吗？ [链接]（https://jsfiddle.net/Kri4shna/pvf9c91x/） – Webruster

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

来源

2015-10-05 06:48:32 Webruster

嗨现在定义#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>

来源

2015-10-05 05:26:26

谢谢你的回复。它只解决了部分问题。 '清楚：两者'都转置了'＃banner_index'。但是它使背景消失了。 –

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

回答

相关问题