0

我试图弄清楚为什么我的<div>元素没有扩展到涵盖它包含的所有内容。当我按下 Shift+Ctrl+J 时，我在 Google Chrome 的“元素”视图中看到了这一点。我希望我的“内容” div 的大小可以包含<p>A</p>and <p>B</p>，但事实并非如此。

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

2 回答 2

2

添加

<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-19T17:19:57.517 回答
0

将此添加到CSS：

#content { overflow: hidden; }
于 2013-02-19T17:16:18.687 回答