DIV容器問題

所以這可能是一個非常小的調整，需要對HTML/CSS代碼進行，但這是我一直面臨的問題。我對一般的HTML網頁代碼如下：DIV容器問題

<!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的是特別是在使用float：left;或浮動：正確;在每一個浮動DIV底部

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

：用於包裝的邊框沒有延續下來的頁面，除非我使用了一個叫做類：

.clearer { 
     clear: both; 
    }

，把一個DIV。有沒有我在這裏做得不正確或者這是一個常見問題？

任何幫助或建議表示讚賞！

謝謝！

戴夫。

來源

2013-09-29 GeordieDave1980

可能重複的[父div沒有根據其子高度採取高度。]（http://stackoverflow.com/questions/10879625/parent-div-is-not-taking-height-according-to-its -children-height） – Quentin

您可以將填充應用於CSS中的div元素。 – Popsyjunior

尋找[clearfix]（http://stackoverflow.com/search?q= [css] + clearfix +是％3Aq） –

這是一個常見問題，您通常可以通過將overflow: auto添加到#wrapper來解決這個問題。如果這不起作用，您的clearer解決方案是另一個經常使用的替代方案。

來源

2013-09-29 13:45:16

回答

相關問題