簡單的CSS定位問題

基本上我試圖創建一個位於主橫幅圖像div（橫幅類）頂部的小div（標題類）。當我的瀏覽器窗口最大化時，我能夠正確定位它，但是當我調整瀏覽器大小時，標題div保持邊距並縮小到比橫幅寬度小得多。我意識到這是因爲我將邊緣設置在左側和右側的固定位置，以便他們保持這些位置......我只是新來的CSS，我不確定如何做以防止發生這種情況。我一直在搞定位一個小時左右，只是無法做到。簡單的CSS定位問題

CSS：

<style type = "text/css"> 

body { 
    background-color: #595959; 
} 

.header { 
    background-color: #4CBB17; 
    padding: 12px 0px 12px 0px; 
    margin: 0px 137px 0px; 137px; 
} 

.banner { 
    text-align: center; 
} 

</style>

HTML：

<html> 
<head> 
    <title>Thanks!</title> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
</head> 

<body> 

    <div class="header"> 
    </div> 

    <div class="banner"> 
     <img src="banner.jpg" />  
    </div> 

</body> 
</html>

任何幫助，將不勝感激！

來源

2011-04-12 tim

尼斯頁標題。 – mVChr 2011-04-12 18:48:54

想到兩件事：1）爲什麼不是「標題」div中的「Banner」div？ 2）我會在「Banner」CSS類上嘗試'float：left'（或'right'）。 – qJake 2011-04-12 18:53:33

要麼把旗幟到頁眉div

或創建一個「包裝」 div整個網站，如果你的旗幟形象，例如是960像素寬，想要多寬的網站是一個包裝多是有益的，你可以居中包裝，忘記試圖中心內，它的一切..或者即使那麼你的旗幟較少然後你可以居中的#wrapper指定內部..選擇;）

CSS：

body { 
    background-color: #595959; 
} 

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

.header { 
    background-color: #4CBB17; 
    padding: 12px 0; 
} 

.banner { 
    text-align: center; 
}

HTML：

<div id="wrapper"> 
    <div class="header">header text</div> 

    <div class="banner"> 
     <img src="banner.jpg" style="width: 960px; height: 230px;" />  
    </div> 
</div>

來源

2011-04-12 18:57:42 clairesuzy

我不確定你想什麼來實現準確，但如果你想的旗幟始終是大小的頭一樣，你可以使用：

.header, .banner { 
    margin: 0px 137px 0px; 137px; 
} 
.header { 
    background-color: #4CBB17; 
    padding: 12px 0px 12px 0px; 
} 

.banner img { 
    width: 100%; 
}

或者你完全擺脫了橫幅，並使用標題的背景圖像。

來源

2011-04-12 18:59:20 jeroen

也許您可以將min-width:屬性添加到標頭？

來源

2011-04-12 19:02:15 LostLin

簡單的CSS定位問題

回答

相關問題