0

我的 CSS 代码有问题。我希望 div .top & .header 等于主体的宽度，但它限制为容器的宽度。我希望它保留在容器类中。

谢谢，

body {
    margin: 0;
    padding: 0;
    background: #000;
    position: relative;
}
.container {
    position: relative;
    width: 910px;
    height: 800px;
    border: 1px solid #fff;
    background: url(images/bg_home.jpg) no-repeat right;
    margin: 0 auto;
    z-index: 0;
}
.top {
    background: #00112b;
    width: 100%;
    position: relative;
    height: 49px;
    z-index: 2;
    opacity: 0.50;
    filter: alpha(opacity=50);
}
.header {
    position: relative;
    left: 0;
    opacity: 0.50;
    filter: alpha(opacity=50);
    background: #012e46;
    width: 100%;
    height: 99px;
    z-index: 2;
}
.header .login {
    background: red;
    opacity: 100;
    filter: alpha(opacity=100);
    float: right;
}
.logo {
    position: absolute;
    top: 15px;
    left: 0;
    z-index: 3;
}

html

<body>
<div class="container">
<div class="top">&nbsp;</div>
<div class="header"> 
    <table  class="login">
          <tr>
            <td>-- Schedule an appointment --</td>
        </tr>
      </table> 
</div>
<div class="logo"><img src="images/logo.gif" width="204" height="120"/></div>
 </div>
</body>
4

3 回答 3

0

尽管您已为 .top 和 .header 提供了 100% 的宽度 - 它们位于宽度为 910px 的容器 div 内。因此，通过说 .top width 100% 您基本上是在说 .top width 910px 因为它是容器的子级，因此它将采用这些样式。

为什么 .top 和 .header 需要放在容器内？如果您希望它们 100% 填满整个浏览器窗口，那么您应该将它们放在容器 div 之外。

祝你好运

于 2013-10-17T08:10:41.233 回答
0

像这样

请remove width:100%;为below selector:

css

.top {
    background: #00112b;

    position: relative;
    height: 49px;
    z-index: 2;
    opacity: 0.50;
    filter: alpha(opacity=50);
}
.header {
    position: relative;
    left: 0;
    opacity: 0.50;
    filter: alpha(opacity=50);
    background: #012e46;

    height: 99px;
    z-index: 2;
}
于 2013-10-17T08:11:21.757 回答
0

你的问题也包含答案。

我希望 div .top & .header 等于正文的宽度

这可以通过具有以下属性/属性来实现width: 100%;

但它限制了容器的宽度

这是因为容器是子元素的父元素。这意味着子元素的最大宽度是父元素的宽度。

我希望它保留在容器类中。

这意味着，您必须为容器赋予width: 100%.

你也可以通过使用溢出属性来解决这个问题，但我认为这不是你想要的。 http://www.w3schools.com/cssref/pr_pos_overflow.asp

这当然意味着：

.container {
    position: relative;
    width: 100%;
    height: 800px;
    border: 1px solid #fff;
    background: url(images/bg_home.jpg) no-repeat right;
    margin: 0 auto;
    z-index: 0;
}

此外，与您的问题无关，但与您的 CSS 无关，您有一个属性，background它加载图像并且不重复。

这是你想要的还是一种模式？在最后一种情况下，考虑在整个页面上重复制作一张小图片，这样可以减少网页的加载时间。

如果问题是关于您background不符合bodys 宽度，请考虑将其添加到body标签而不是container标签中。

于 2013-10-17T08:12:08.993 回答