Question

Container / Wrapper Div不包含所有内容（即所有子Div）。我尝试过overflow：隐藏但仍无效。有人可以告诉我为什么会这样，有什么可能的解决方案。

提前谢谢你; - ）

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

 <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>

Answer 1

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

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

编辑：发现问题 - 这是一个错字。您有<div="header"> - 它应该是<div id="header">（请注意缺少的'id'）

Answer 2

尝试将clear:both提供给父div或在其末尾放置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>

Answer 3

一个很棒的工具： http://validator.w3.org/ - 这将告诉您是否存在标记错误以及在哪些行上。

Answer 4

您可以将此css添加到父div：

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

检查一些内部元素是否有浮动或有一些高度限制，有时这是一个问题。

Answer 5

<h2> subheading<h2>

你错过了/

Answer 6

你的HEAD元素中有一个DIV。

Answer 7

默认情况下，浮动元素不会包含在div中。

尝试在父div中执行overflow：auto。这将使父div也包含浮动元素。

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

7 个答案: