Question

我试图找出为什么我的<div>元素不会扩展以涵盖它包含的所有内容。当我按Shift + Ctrl + J时，我在谷歌浏览器的“元素”视图中看到了这一点。我希望我的“内容”div的大小可以包含<p>A</p>和<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>

Answer 1

添加

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

Answer 2

将此添加到css：

#content { overflow: hidden; }

页脚覆盖内容HTML

2 个答案: