CSS divs不可見

我正在設計一個網站，我與div混淆。CSS divs不可見

<div id="header_wrapper"> 
    <div class="header"> 
     <div class="logo"> 
      <img src="css/images/logo-dark.png" alt="Mint Bite" /> 
     </div> 

    </div>  
</div> 

<div id="menu_wrapper"> 
    <div class="menu"> 
     <ul> 
      <li> 
       <a href="">HOME</a> 
      </li> 

      <li> 
       <a href="">HOME</a> 
      </li> 

      <li> 
       <a href="">HOME</a> 
      </li> 

      <li> 
       <a href="">HOME</a> 
      </li>  
     </ul>  
    </div> 
</div>

而CSS：

body 
{ 
    margin:0; 
    padding:0; 
} 
html 
{ 
    background:#d2d1d0; 
    margin:0; 
    padding:0; 
} 
#header_wrapper 
{ 
    background:#232323; 

} 
.header 
{ 
    width:950px; 
    margin:0 auto; 
} 
.logo 
{ 
    width:300px; 
    float:left; 
} 
#menu_wrapper 
{ 
    overflow:auto; 
    background:#333333; 
    margin:0; 
    padding:0; 

} 
.menu 
{ 
    width:950px; 
    margin:0 auto; 
} 

.menu ul 
{ 
    width:550px; 
    margin-left:200px; 
} 
.menu li 
{ 
    float:left; 
    padding:4px; 
} 
.menu li a 
{ 
    color:#FFFFFF; 
}

但不是顯示menuheader後，我得到了什麼導致像下面的圖片。什麼原因？ enter image description here

來源

2012-12-08 Suraj Hazarika

在標題包裝div後面添加一行。

<style> 

.clearFix 
{ 
clear:both; 
} 
</style>

添加這個div頭包裝後

<div class="clearFix"></div>

來源

2012-12-08 07:34:13 Moiz

謝謝Moiz..But頭的div背景變成一樣的身體......不＃232323！ –

<html> 
<head> 
    <style> 
     #mainContainer 
     { 
      width:960px; 
      margin:0 auto; 
     } 
     #header_wrapper 
     { 
      background: #232323; 

     } 
     .header 
     { 
      width: 950px; 
      height:100px; 

     } 
     .logo 
     { 
      width: 300px; 
      float: left; 
     } 
     #menu_wrapper 
     { 
      width:100%; 
      background: #333333; 
      margin: 0; 
      padding: 0; 
      overflow:auto; 
     } 
     .menu 
     { 
      width: 950px; 
      margin: 0 auto; 
     } 

     .menu ul 
     { 
      width: 550px; 
      margin-left: 200px; 
     } 
     .menu li 
     { 
      float: left; 
      padding: 4px; 
     } 
     .menu li a 
     { 
      color: #FFFFFF; 
     } 
    </style> 
</head> 
<body> 
    <div id="mainContainer"> 
     <div id="header_wrapper"> 
      <div class="header"> 
       <div class="logo"> 
        <img src="css/images/logo-dark.png" alt="Mint Bite" /> 
       </div> 
      </div> 
     </div> 
     <div id="menu_wrapper"> 
      <div class="menu"> 
       <ul> 
        <li><a href="">HOME</a> </li> 
        <li><a href="">HOME</a> </li> 
        <li><a href="">HOME</a> </li> 
        <li><a href="">HOME</a> </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2012-12-08 07:42:55 Moiz

回答

相關問題