页脚覆盖内容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

回答

相关问题