我的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"> </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>
答案 0 :(得分:0)
虽然你给了.top和.header宽度为100% - 但是它们位于宽度为910px的容器div中。因此,通过说.top width 100%,你基本上是说.top width 910px,因为它是容器的子容器,因此它将采用这些样式。
为什么.top和.header需要放在容器内?如果您希望它们是100%,即填满整个浏览器窗口,那么您应该将它们带到容器div之外。
祝你好运答案 1 :(得分: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;
}
答案 2 :(得分:0)
您的问题也包含答案。
我想要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
代码。