简单的 CSS 定位问题答案

【问题标题】：Simple CSS Positioning Question简单的 CSS 定位问题
【发布时间】：2011-04-12 18:45:28
【问题描述】：

基本上，我正在尝试创建一个位于主横幅图像 div（横幅类）之上的小型 div（标题类）。当我的浏览器窗口最大化时，我已经能够正确定位它，但是当我调整浏览器的大小时，标题 div 会保持边距并缩小到远小于横幅的宽度。我意识到这是因为我将边距设置在左侧和右侧的固定位置，所以他们保持这些位置......我只是 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>

任何帮助将不胜感激！

【问题讨论】：

想到两件事：1）为什么“横幅”div不在“标题”div中？ 2）我会在“横幅”CSS类上尝试float: left（或right）。

标签： html css

【解决方案1】：

要么将横幅放入标题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>

【讨论】：

【解决方案2】：

我不确定您到底想达到什么目的，但如果您希望横幅始终与标题大小相同，您可以使用：

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

.banner img {
    width: 100%;
}

或者您完全摆脱横幅并使用背景图片作为标题。

【讨论】：

【解决方案3】：

也许您可以在标题中添加min-width: 属性？

【讨论】：