爲什麼id =「header」的黑色不顯示？

我已經寫了這段代碼，所有的div都正常工作，也是導航。但是「標題」的黑色似乎不起作用。我已經發布了下面的整個代碼。請看下面的代碼。爲什麼id =「header」的黑色不顯示？

<!DOCTYPE html> 
<html> 
<head> 
<style> 

body 
{ 
    padding: 0; 
} 
#container 
{ 
    margin: 0 auto; 
    width:100%; 
    height: 1500px; 
    padding: 0px; 
} 

#header 
{ 
    background-color: black;  
    margin: 0px; 
} 

#logo 
{ 
    background-color: green; 
} 

#headTable 
{ 
    float:right; 
} 

#logo 
{ 
    margin: 5px 0px 5px 70px; 
    float: left; 
    width:150px; 
    height:100px; 
} 

#headTable ul 
{ 
    list-style-type: none; 
    margin: 0; 
} 

#headTable ul li 
{ 
    color: black; 
    float: left; 
    margin: 10px 50px; 
} 

#nav 
{ 
    clear: both; 
    width:100%; 
    height: 100px; 
    background-color: purple; 
} 

#nav ul 
{ 
    margin-left: 100px; 
    padding: 0; 
} 

#nav ul li 
{ 
    display: block; 
    margin: 10px; 
    padding: 20px; 
    float: left; 
} 



</style> 
</head> 

<body> 

<div id="container"> 
    <div id="header"> 
     <div id="logo"> 
      <img src="plane.jpg" width="150" height="100"> 
     </div> 
     <div id="headTable"> 
      <ul> 
       <li>Google</li> 
       <li>Google</li> 
       <li>Google</li> 
      </ul> 
     </div> 
    </div> 

     <div id="nav"> 
      <ul> 
       <li>Menu</li> 
       <li>Blog</li> 
       <li>Ins</li> 
       <li>BBC</li> 
       <li>Contact</li> 
       <li>Others</li> 
      </ul>  
     </div> 

    <div id="content"> 

     <div id="page"> 
      <p>This is a paragraph that should 
      stay intact inside the id of Page. 
      </p>  
     </div> 

     <div id="top"> 
      <p>THis is a paragraph that should 
      stay intact inside the id of top. 
      </p> 
     </div> 

     <div id="low"> 
      <p>This is a paragraph that should 
      stay intact inside the id of bottom. 
      </p>  
     </div> 

    </div> 
</div>    

</body> 
</html>

來源

2014-07-22 raiyan106

apply overflow：hidden;到您的#header ID。 – Michael

溢出是如何工作的？ – raiyan106

-2

我創建了一個jsfiddle：http://jsfiddle.net/JsA7y/。
所以，我當然可能會有和你一樣的「問題」; img src指向無處（在jsfiddle中）。
？你的img指向哪裏？
？ img與你的html在同一個目錄下嗎？
=>其他方面，您將需要使用正確的uri;
例如，如果IMG是一個目錄在同一級別的HTML：

<img src="directory/plane.jpg" width="150" height="100">

... 希望這會有所幫助。

來源

2014-07-22 17:25:20

這個問題不是關於jsFiddle中的破碎圖像（這些問題一直都在發生）。這是關於父母不包含浮動的孩子。 – j08691

？爲什麼否定？我更新了http://jsfiddle.net/JsA7y/2/指向一個實際的圖像和它沒有作品！ - O.P. FYI theree是基於網絡的圖片_持有者 - 生成者：http：// lorempixel.com/; http：// pipsum.com/; ＆我的最愛。 http：// dummyimage.com/;因爲你可以嵌入img大小。 –

你甚至讀過這個問題嗎？ – j08691

因爲#header在這種情況下沒有定義的大小，因爲唯一的元素它包含有浮動。

三種簡單的方法解決此問題：

明確定義尺寸#header。
將display:inline-block加到#header。
在#header中的兩個浮動元素之後使用clearfix。這通常通過使用<div style="clear:both;"></div>

來源

2014-07-22 17:12:03

gee ..謝謝男人。 – raiyan106

-1

您必須在CSS中爲您放置一些「高度」#header標記。祝你好運！

來源

2014-07-22 17:17:06 NikolaSae

添加overflow:auto到#header：

#header { 
    background-color: black; 
    margin: 0px; 
    overflow:auto; 
}

jsFiddle example

浮動的內容，使家長充當如果沒有內容，它崩潰。添加溢出規則可恢復您尋求的行爲。

來源

2014-07-22 17:22:10 j08691

爲什麼id =「header」的黑色不顯示？

回答

相關問題