我的包裝類不「持有」任何

我有一個非常簡單的一點點代碼。它是這樣的：我的包裝類不「持有」任何

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Home Index Test</title> 
    <link rel="stylesheet" type="text/css" href="reset.css" media="all"> 
    <link rel="stylesheet" type="text/css" href="styles.css" media="all"> 

<!-- <script type="text/javascript" src="view.js"></script> --> 
</head> 
<body> 

<div id="wrapper"> 
    wrapper 
    <div id="header"> 
     <div id="logo"> 
       <img src="kimchi_img/bibi_logo.jpg"> 
     </div> 

     <div id="login_menu"> 
      <p>About Contact | Sign In Register </p> 
     </div> 
    </div> 
</div> 

</body> 
</html>

很簡單吧？封裝類將所有東西都捆綁起來，一個包含徽標和菜單的標題塊。但是當我在Firebug中看到它時，它的行爲就像包裝類沒有任何東西。我知道在Firefox中，div元素必須包含某些內容才能顯示出來。所以我試了一下測試—我在上面看到的包裝類裏面放了「wrapper」這個詞。那麼，現在它出現了，但它的行爲像「包裝」只是一條線。我覺得我錯過了這個過程中的重要一步。下面是相關的CSS：

#wrapper { 
    clear:both; 
    margin:0 auto; 
    padding:0; 
    width:960px; 
} 

#header{ 
    width:960px; 
} 

#logo{ 
    float:left; 
    width: 380px; 
} 

#login_menu{ 
    float:left; 
    text-align: right; 
    width:580px; 
}

我也得到了在後面reset.css打呼嚕，但沒有明確起來。

來源

2010-02-24 GilloD

嘗試設置包裝類的高度 – 2010-02-24 08:15:42

無論何時您擁有一個容納浮動元素的容器，只要您爲容器指定了明確的overflow，容器就會摺疊。這種添加要麼#wrapper或#header：

overflow: hidden;

現在，這將（當然）無法在IE6。爲了解決這個錯誤，我通常會添加以下規則：

-height: 1px; 
-overflow: auto;

在這裏，我用的是-黑客瞄準IE6，但如果你不喜歡使用黑客，只需移動這兩個屬性（不帶連字符）到一個單獨的樣式表並通過條件註釋鏈接它。

來源

2010-02-24 08:19:34

先生，您是一位天才。我不能相信我忘記了。啊。萬分感謝！ – GilloD 2010-02-24 08:21:54

@GilloD：不客氣。如果您期望用戶使用古董軟件，請參閱我的兼容性更新:) – 2010-02-24 08:23:54

良好的通話。我正要提到相同的。 – 2010-02-24 08:26:34

另一個解決方案是設置在包裝件的底部與

style="clear:both;"

添加一個空div。

來源

2010-02-24 08:38:29 Jens

這可能在某些情況下用作解決方法，但不是當您需要擴展容器時 - 例如。容器具有背景顏色或點擊事件處理程序。 – 2010-02-24 10:12:01

我收到了容器 – 2013-02-20 12:43:14

我的包裝類不「持有」任何

回答

相關問題