的DIV重疊，用在他們沒有CSS定位

我在文檔中有幾個div的是是使用CSS定位，然而，頁腳和內容的div沒有定位在所有，除了一些邊距（由於其他div使用CSS定位）。

以下是帶有所有代碼的jsfiddle。或者，我想你可以使用Firebug或Chrome開發者工具。我似乎無法弄清楚爲什麼頁腳不會像內容div一樣處於文檔的正常流動中，而是坐在它們後面。

我只是使用頁邊距將頁腳向下推開，但這很sl，，我將使用javascript切換打開和關閉三個內容部分，顯然我希望頁腳響應在頁面中的這些更改期間。

謝謝大家的幫助。

HTML

<div id="header"> 

    <div id="header_logo"><a href="index.php"><img src="images/vending_logo_alt.png" alt="" /></a></div> 
    <div class="row"> 
     <ul> 
      <div class="col-1-4"><a href="index.php">Home</a></div> 
      <div class="col-1-4"><a href="products.php">Products</a></div> 
      <div class="col-1-4"><a href="about.php">About</a></div> 
      <div class="col-1-4"><a href="contact.php">Contact Us</a></div> 
     </ul> 
    </div> 
    </div> 

<div id="heading_pad"></div> 

<div id="home_image"></div> 

     <div id="lower_nav"> 
    <div class="row"> 
     <div id="combination" class="col-1-4"><a href="#">Combination</a></div> 
     <div id="food" class="col-1-4"><a href="#">Food</a></div> 
     <div id="snack" class="col-1-4"><a href="#">Snack</a></div> 
     <div id="drink" class="col-1-4"><a href="#">Drink</a></div> 
    </div> 
</div> 

    <div id="content"> 



    </div><!-- #content --> 

<div id="footer" class="row"> 

     <div id="footer_one" class="col-1-4"> 
      <div id="footer_sitemap_image"><img src="images/vending_connect_icon_alt.png" alt="" /></div> 
      <div id="footer_sitemap"> 
       <a href="">Home</a> | <a href="">Products</a> | <a href="">About</a><br> 
       <a href="">Contact Us</a> | <a href="">Combination</a><br> 
       <a href="">Food</a> | <a href="">Drink</a> | <a href="">Snack</a> 
      </div> 
     </div><!-- #footer_one --> 

     <div id="footer_two" class="col-1-2"> 
      <div id="footer_contact_image"><img src="images/vending_mail_icon_alt.png" alt="" /></div> 
      <div id="footer_contact"> 
       1234 Gateway Drive<br> 
       Cottontown, TN 37048<br> 
       (615)xxx-xxxx | (615)xxx-xxxx<br> 
       <a href="#">[email protected]</a> 
      </div> 
     </div><!-- #footer_two --> 

     <div id="footer_three" class="col-1-4"> 
      <div id="footer_social_image"><img src="images/vending_chat_icon_alt.png" alt="" /></div> 
      <div id="footer_social"> 
       Connect with us on <span style="font-weight:600;"><a href="#">Facebook</a></span><br> 
       Follow us on <span style="font-weight:600;"><a href="#">Twitter</a></span><br> 
       Link to us on <span style="font-weight:600;"><a href="#">LinkedIn</a></span> 
      </div> 
     </div><!-- #footer_three --> 

     <div id="all_rights">&copy; 2014 Vending Company. All rights reserved. Website by Ian Stanford.</div> 

</div><!-- #footer -->

來源

2014-04-23 realianstanford

DIV不能是UL的孩子。您的HTML無效。 –

這在驗證器中沒有出現。該頁面正確顯示內容，無論是div還是列表項。我知道把div作爲一個無序列表的孩子是沒有意義的，我已經修正了它，但說它無效是愚蠢的。 – realianstanford

問題就在這裏：

#content { 
    height:1px; 
}

您#content的內容溢出1px高度。刪除此內容將正確流動。

來源

2014-04-23 16:55:14

謝謝。第二組眼睛總是有用的。我不記得這麼做，或者我正在努力完成的。 – realianstanford

的DIV重疊，用在他們沒有CSS定位

回答

相關問題