Question

所以这可能是一个非常小的调整，需要对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;
  }

我发现当我将内容放入页面上的任何其他DIV时，特别是当使用浮动时：左;或漂浮：对;除非我使用名为：

的类，否则包装器的边框不会继续在页面上

  .clearer {
      clear: both;
  }

并放置DIV：

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

在每个浮动的DIV的底部。有没有我在这里做得不好或这是一个常见的问题？

感谢任何帮助或建议！

谢谢！

戴夫。

Answer 1

这是一个常见问题，您通常可以通过向overflow: auto添加#wrapper来解决此问题。如果这不起作用，您的clearer解决方案是另一种经常使用的替代方案。

DIV容器问题

1 个答案: