简单的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定位问题

回答

相关问题