基本上，我正在尝试创建一个位于主横幅图像 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>
如有任何帮助，我们将不胜感激!
最佳答案
要么将横幅放入页眉 div
或者为整个网站创建一个“包装器”div，例如，如果您的横幅图像是 960 像素宽，并且您希望网站作为包装器的宽度对您有好处可以将 wrapper 居中，而忘记尝试将其内部的所有内容居中.. 或者即使您的横幅较少，您也可以将其居中在#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>
关于html - 简单的 CSS 定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5640078/