以下是截图:
header http://dl.getdropbox.com/u/118004/Screen%20shot%202010-04-13%20at%202.50.49%20PM.png
左边的红色条是我为#personal div设置的背景,我希望它垂直对齐到容器的顶部。
问题是我在#container div的#container-top div后面有绝对定位的背景。有没有办法移动#personal div以便没有剩余空间?
HTML
<div id="container">
<div id="container-top"></div>
<div id="personal">
<h1>Jonathan Doe</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
</div> <!-- end #personal -->
</div> <!-- end #container -->
CSS
#container {
background: url(images/bg-mid.png) repeat-y top center;
width: 835px;
margin: 40px auto;
position: relative;
}
#container-top {
background: url(images/bg-top.png) no-repeat top center;
position: absolute;
height: 12px;
width: 835px;
top: -12px;
}
#container-bottom {
background: url(images/bg-bottom.png) no-repeat top center;
position: absolute;
height: 27px;
width: 835px;
bottom: -27px;
}
#personal {
background: url(images/personal-info.png) no-repeat 0px left;
}
答案 0 :(得分:1)
更改以下CSS:
#personal {
background: url(images/personal-info.png) no-repeat 0px left;
position: relative;
top: 0px;
left: 0px;
}
您需要position
此元素relative
为其父级; container
,以便它适合您想要的地方。 top
和left
属性与您希望特定元素的父div
的左上角的距离。
或者这个:
#personal {
background: url(images/personal-info.png) no-repeat 0px left;
margin-top:-10px; /*px value that works*/
}
这将在其父div中获取其当前位置,并将其渲染为比当前位置高10个像素。
答案 1 :(得分:1)
[编辑:改版。]
HTML:
<div id="container">
<div id="container-inner">
<div id="personal">
<h1>Jonathan Doe</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
</div> <!-- end #personal -->
</div> <!-- end #container-bg -->
</div> <!-- end #container -->
CSS:
#container {
background: url(images/bg-mid.png) repeat-y top center;
width: 835px;
/*margin: 40px auto;*/
margin: 28px auto 40px auto;
position: relative;
}
#container-inner {
background: url(images/bg-top.png) no-repeat top center;
}
#personal {
background: url(images/personal-info.png) no-repeat 0px left;
padding-top: 12px;
}
这是根据你想做的吗?
答案 2 :(得分:1)
除非我遗漏了某些内容,否则我会看到你发布了什么产生了你想要的结果。
我想知道你是否在你的风格中应用了重置CSS?如果没有,您可以查看yahoo user interface css reset或Eric Meyer's reset CSS。
浏览器可能有一些默认的填充和边距。
您在其他样式之前包含重置CSS。也许你已经知道这一点,但值得一提。