Question

基本上我正在尝试创建一个位于主横幅图像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>

非常感谢任何帮助！

Answer 1

将横幅放入标题div

或为整个网站创建一个“包装器”div，如果您的横幅图片宽度为960px，并且您希望网站成为包装器的宽度有多大，那么您可以将其放在中心位置。包装并忘记尝试将所有内容集中在其中..或者即使你的横幅较少，你也可以将它放在#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>

Answer 2

我不确定您要完全实现的目标，但如果您希望横幅始终与标题大小相同，则可以使用：

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

.banner img {
    width: 100%;
}

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

Answer 3

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

简单的CSS定位问题

3 个答案: