無法獲取背景圖像與人造列方法可見

一定有什麼東西非常簡單，我搞亂了，但我不能告訴它是什麼。兩列顯示正確分隔，圖像位於正確的位置（我已將圖像拖放到VS2012中的CSS代碼中以驗證路徑是否正確。）背景圖像應該顯示左列是一個棕褐色和主要內容列爲白色。相反，整個頁面的背景是白色的。無法獲取背景圖像與人造列方法可見

下面是HTML：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link href="TwoColumnStyle.css" rel="stylesheet" /> 
    <title>Two-column layout</title> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="leftColumn"> 
     <ul> 
      <li>First</li> 
      <li>Second</li> 
      <li>Third</li> 
     </ul> 
    </div> 
    <div id="mainContent"> 
     <h1>This is the header</h1> 

     <h2>Content1</h2> 
     <p>This is the first paragraph. La de daa.</p> 
     <p>This is the second paragraph. Doo be doo.</p> 

     <h2>Content2</h2> 
     <p>This is the third paragraph. Bow chik a wow wow.</p> 
    </div> 
    </div>  
</body> 
</html>

這裏是CSS：

body { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#wrapper { background-image: url(images/col_bg.png); 
     background-repeat: repeat-y; 
     background-position: left top; } 

#leftColumn { 
    width: 100px; 
    float: left; 
} 

#mainContent { 
    width: 860px; 
    float: right; 
}

這裏是將圖像的絕對路徑，但明顯高於CSS是相對路徑：

http://localhost:10525/layouts1/images/col_bg.png

圖片是960px x 1px。

任何線索，我做錯了什麼在這裏？我試圖用DIV做一些實驗用的基本佈局，並從我在網上看到的信息，這是它究竟應該怎麼寫（通過CSS失蹤手冊第2版和在線資源。）

來源

2013-07-06 Ben

我發現了這個問題。我不知道爲什麼我在查看這種方法的引用沒有明確說明這一點，但溢出：隱藏必須被添加到包裝，使其自動調整到內部div。

一旦我編輯像這樣的CSS，這個問題就解決了：

#wrapper { 
    background-image: url(images/col_bg.png); 
    background-repeat: repeat-y; 
    background-position: left top; 
    overflow:hidden; 
}

來源

2013-07-06 18:03:22 Ben

試過了，它有效。溢出不是我平常的goto風格規則，但是，我剛剛學到了一些東西。謝謝！ – nocturns2

你可以試試將主體選擇器中的所有樣式規則移動到#wrapper選擇器，然後將透明背景添加到#leftColumn（如果希望#wrapper中的圖像顯示），並將背景白色添加到#mainContent中。

您還可以添加背景顏色或圖像，你的身體選擇。當您爲#wrapper添加寬度並且瀏覽器全屏打開時，您無法控制瀏覽器大小，#wrapper只會佔用屏幕的一部分，其餘部分將來自正文。

最後一個位，這是浮動不會總是產生結果上所有的瀏覽器如預期確切的寬度。特別是如果他們在一個約束容器內。

[編輯] 你必須給你一個#wrapper指定最小高度才能看到它在屏幕上。

[編輯] 我發現它獨特的#wrapper指定所需的最小高度，以顯示自己。所以我刪除了最小高度，並在#wrapper中使用表單標籤和輸入進行了測試，但在其他兩個div下面，背景一直顯示在表單標記的底部。看起來這兩個div根本不影響#wrapper div。

來源

2013-07-06 16:38:18 nocturns2

添加分鐘八個屬性確實揭示的背景，但正如你所說，包裝DIV並沒有增長，以適應兩個內部div的。但我不確定爲什麼會出現這種情況 - 對此有何看法？ – Ben

我想出了決議並將其作爲答案發布。謝謝您的幫助！ – Ben

無法獲取背景圖像與人造列方法可見

回答

相關問題