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

Add

<div style="clear:both"></div>

After

<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 に答える