Question

我是网络开发的新手。我的容器div设置为margin: 0 auto; position: relative;，它显示在屏幕中间。我在容器中有一个banner div，它有一些背景颜色，我想扩展整个屏幕宽度。我决定在container div之外使用另一个div，其背景颜色和高度与banner div相同，并将其命名为标题。但是我如何将它们放在另一个上，更确切地说，container div上的header div？

修改一些html：

<body>
  <div id="header"></div>
  <div id="container">
    <div id="banner">
      <img src="images/banner.gif" width="450" height="80" alt="parul library" />
    </div>
  </div>
</body>

CSS：

#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}

#header {
position:absolute;
top:0;
height: 80px;
background: rgb(222,239,255); /* Old browsers */

}

Answer 1

尝试将此CSS用于标题div：

.header {
    background: #bada55;
    height: 90px;
    width: 100%;
    position: absolute;
}

并确保容器的样式定义中包含position: relative;。

这是一个有效的演示： http://jsfiddle.net/rkJMJ/

问题中发布的HTML和CSS更新：

（将width: 100;添加到#header样式def）

#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}

#header {
position:absolute;
top:0;
height: 80px;
width: 100%;
background: rgb(222,239,255); /* Old browsers */
}

在较宽的div上加宽一个较小的div

1 个答案: