容器/包装div未包含所有内容？

Question

容器/包装div未包含所有内容？

8

容器/包装Div并未包含所有内容（即所有子Div）。我尝试过使用overflow: hidden，但仍然无效。请问有人可以告诉我为什么会出现这种情况以及可能的解决方案吗？

提前感谢；-）

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

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

- Imran

1

如果您能发布代码将会很有帮助。 - Rob

7个回答

4

尝试将 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>

- Sarfraz

第二种可能性与第一种不同。如果您将<div class="clear"></div>放在#parent div之前，那么两者都具有相同的效果。 - ANeves

1

可能性一在我正在处理的一个项目中表现得非常好。 - ThaKidd KG5ORD

4

一个很好的工具： http://validator.w3.org/ - 这个工具可以告诉你是否存在标记错误以及在哪些行上出现了错误。

- Moak

2

您可以将此CSS添加到父级div中： .parent-div{overflow:auto;clear:both;} 并检查一下内部元素是否有浮动或高度限制，有时这是一个问题。

- jacr1614

1

<h2> subheading<h2>

你漏掉了一个 /

- Nicolas Viennot

0

你的 HEAD 元素中有一个 DIV。

- user164226

0

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

尝试在父 div 中使用 overflow:auto。这将使父 div 也包含浮动元素。

- Aniket Palve

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ray · Accepted Answer

根据我的预测，您的子 div 元素已经浮动，而容器没有。在这种情况下，容器元素将无法展开以适应其内容。尝试将容器元素也设置为浮动，看看会发生什么。

我的水晶球可能有点灰尘了... 不过，您发布的代码是无效的——因为您在 head 标签中放置了内容，并且还有一个 div 元素位于 html 标签外。这是您页面的真实结构吗？还是只是复制代码时出错了？请尝试清理代码结构并观察是否有所帮助。

编辑：找到问题了——是一个拼写错误。您使用了 <div="header">，但应该是 <div id="header">（注意缺少的 'id' 属性）