1

したがって、これはおそらく HTML/CSS コードに行う必要がある非常に小さな調整ですが、これが私が直面している問題です。一般的な HTML ページのコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<link href="sites/css/style.css" rel="stylesheet" type="text/css" />
<title>My Page</title>
</head>
<body>
<div class="wrapper">
    <div class="header">Header</div>
        <div class="navbar">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Services</li>
            </ul>
        </div>
 <div class="main_content">


 </div>
 <div class="footer">Copyright &copy; 2012-2013.</div>
 </div>
 </body>
 </html>

.wrapper クラスの CSS は次のとおりです。

 .wrapper {
     border: 1px solid #ddd;
     margin-left: auto;
     margin-right: auto;
     width: 980px;
  }

特に float: left; またはフロート: 右; 次のクラスを使用しない限り、ラッパーの境界線はページの下に続きません。

  .clearer {
      clear: both;
  }

そしてDIVを入れます：

  <div class="clearer"></div>

フローティングされているすべての DIV の下部にあります。ここで正しく行っていないことがありますか、それとも一般的な問題ですか?

ヘルプやアドバイスをいただければ幸いです。

ありがとう！

デイブ。

4

1 に答える 1

1

これは一般的な問題であり、通常は に追加することで修正できoverflow: autoます#wrapper。それがうまくいかない場合、あなたのclearerソリューションはよく使われる別の代替手段です。

于 2013-09-29T13:45:16.070 に答える