Container/Wrapper Div不包含所有内容？

问题描述：

Container/Wrapper Div不包含所有内容（即所有子Div的）。我尝试了溢出：隐藏但仍然不起作用。有人可以告诉我为什么会发生这种情况，以及可能的解决方案是什么。Container/Wrapper Div不包含所有内容？

预先感谢您;-)

由于某种原因，整个代码不显示？

<html> 
    <head> 
     <style type="text/css"> 
     #wrapper { 
      margin:0 auto; 
      width: 600px; 
      background: yellow;  
     } 
     </style> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <div="header"> 
       <h1>my beautiful site</h1> 
      </div> 

      <div id="navigation"> 
       <ul> 
        <li><a href="#">Home </li> 
        <li><a href="#">About</li> 
        <li><a href="#">Services</li> 
        <li><a href="#">Contact us </li> 
       </ul> 
      </div> 

      <div id="content"> 
       <h2> subheading </h2> 
       <p> long paragraph </p> 
      </div> 

      <div id="footer"> 
        copyright 123 
      </div> 
     </div> 
    </body> 
</html>

它会帮助，如果你发布的代码.. – Rob 2010-05-17 13:40:53

答

与我的水晶球，我会预测你的孩子divs浮动，你的容器不是。在这种情况下，容器不会扩展以适应其内容。尝试漂浮你的容器，看看会发生什么。

晶体一定是尘土飞扬...但是，您发布的代码是无效的 - 你有head标签内的内容和html标签外的div。这是你的页面真正看起来的样子，还是只是将代码粘贴到你的问题中的错误？尝试清理代码结构，看看它是否有帮助。

编辑：发现问题 - 这是一个错字。你有<div="header"> - 它应该是<div id="header">（注意没有“身份证”）

我不能发布所有的代码在那里出于某种原因！是的几个错别字opps :-( – Imran 2010-05-17 13:56:57

请再试一次 - 用你剩下的小代码片段，没有人能帮助 – Ray 2010-05-17 14:10:00

我编辑了我的答案，以显示导致问题的代码中的错字 – Ray 2010-05-17 15:46:26

答

尝试给clear:both父股利或放div在它的结束：

<style type="text/css"> 
.clear{clear:both;} 
</style>

可能性一：

<div id="parent"> 
    <div id="child1">Some Content</div> 
    <div id="child2">Some Content</div> 
    <div id="child3">Some Content</div> 

    <div class="clear"></div> 
</div>

可能性二：

<div id="parent" class="clear"> 
    <div id="child1">Some Content</div> 
    <div id="child2">Some Content</div> 
    <div id="child3">Some Content</div> 
</div>

第二种可能性与第一种不同。如果你把＃

'放在'＃parent' div之前，那么是的，两者都有相同的效果。 – ANeves 2010-05-17 15:44:02

Possibility One在我正在开发的一个项目中工作得很好。 – 2011-10-21 00:16:25

答

在HEAD元素中有一个DIV。

答

<h2> subheading<h2>

你错过了/

答

一个伟大的工具： http://validator.w3.org/ - 这会告诉你，如果有标记错误和什么线路。

谢谢Moak我会试试！ – Imran 2010-05-17 19:45:01

答

可以将此CSS添加到父DIV：

.parent-div{overflow:auto;clear:both;}

并检查是否存在内部元件的具有浮动还是有一定高度的限制，有时这是一个问题。

Container/Wrapper Div不包含所有内容？

相关推荐