0

这是一个屏幕截图：

标题 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;
}
4

3 回答 3

1

更改以下 CSS：

    #personal {
  background: url(images/personal-info.png) no-repeat 0px left;
position: relative;
top: 0px;
left: 0px;
}

您需要position将此元素relative添加到其父级；container，以便它适合您想要的位置。和属性是您想要特定元素的父级左上角top的距离。leftdiv

或这个：

#personal {
      background: url(images/personal-info.png) no-repeat 0px left;
    margin-top:-10px; /*px value that works*/
    }

这将在其父 div 中获取其当前位置，并将其渲染为比当前定位高 10 个像素。

于 2010-04-13T12:06:17.077 回答
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;
}

这符合您的意愿吗？

于 2010-04-13T12:37:05.430 回答
1

除非我遗漏了什么，否则我会看到您发布的内容会产生您想要的结果。

我想知道您是否已将重置 CSS 应用于您的样式？如果没有，您可以查看yahoo 用户界面 css reset或Eric Meyer 的 reset CSS。

浏览器可能有一些默认的填充和边距。

您在其他样式之前包含重置 CSS。也许您已经知道这一点，但值得一问。

于 2010-04-13T12:39:30.487 回答