頁腳覆蓋內容HTML

我試圖找出爲什麼我的<div>元素不能展開以涵蓋它包含的所有內容。當我按下Shift + Ctrl + J時，我在Google Chrome的「元素」視圖中看到了這一點。我預計我的「內容」div的大小應該包括<p>A</p>和<p>B</p>，但事實並非如此。頁腳覆蓋內容HTML

PS--我讀過一些頁腳通常是絕對定位的註釋，但這只是爲了顯示錯誤。

這裏是簡化的頁面：

<html> 

    <head> 
    <style type="text/css"> 
     #footer{ 
     background-color: lightblue; 
     margin-top: 10px; 
     } 
    </style> 

    </head> 

    <body> 

    <div id="content" align="center"> 
     <div style="width:50%;"> 
     <p align="left"> 
      Two divs: 
      <div style="width:80%; float:left;"><p>A</p></div> 
      <div style="width:20%; float:right;"><p>B</p></div> 
     </p> 
     </div> 
    </div> 

    <div id="footer" align="center"> 
     <div style="width:90%;" align="center"> 
     Here is my footer. 
     </div> 
    </div> 

    </body> 
</html>

來源

2013-02-19 user

div上沒有align屬性。 – DanMan 2013-02-19 17:17:06

@DanMan這是一個新的支持選項，或者這是一個w3fools的例子嗎？ http://www.w3schools.com/tags/att_div_align.asp – user 2013-02-19 17:37:45

通過驗證程序運行您的HTML，它很可能會抱怨。它也被鏈接到你的網站上。 – DanMan 2013-02-19 20:09:55

添加

<div style="clear:both"></div>

後

<div style="width:80%; float:left;"><p>A</p></div> 
<div style="width:20%; float:right;"><p>B</p></div>

來源

2013-02-19 17:19:57

+1感謝您的快速幫助 - 這是非常不幸的，這是必要的。 Python的「最小驚喜」格言不適用於此... – user 2013-02-19 17:39:19

它添加到CSS：

#content { overflow: hidden; }

來源

2013-02-19 17:16:18

頁腳覆蓋內容HTML

回答

相關問題