Question

我的CSS代码有问题。我想要div .top＆amp; .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>

Answer 1

虽然你给了.top和.header宽度为100％ - 但是它们位于宽度为910px的容器div中。因此，通过说.top width 100％，你基本上是说.top width 910px，因为它是容器的子容器，因此它将采用这些样式。

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

祝你好运

Answer 2

喜欢这个

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;
}

Answer 3

您的问题也包含答案。

我想要div .top＆amp; .header等于身体的宽度

这可以通过具有width: 100%;

的属性/属性来实现

但它限制了容器的宽度

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

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

这意味着，您必须为容器提供width: 100%的属性。

您也可以使用overflow属性来解决这个问题，但我认为这不是您想要的。 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未达到body的宽度，请考虑将其添加到body代码而不是container代码。

div宽度应该等于体宽

3 个答案: