css - 帮助布局

Question

我正在尝试为网络构建个人资料页面...类似于 Facebook 个人资料页面。我需要将标签所在的背景放在左侧的个人资料照片下方......因此当用户更新其状态时，它会在照片下方垂直增长......看看 Facebook 个人资料页面。我试过将状态放在顶部的“topStatus”position:absolute；顶部:-51px；在左列“profile_leftside”上有效，但当更多应用程序添加到左侧时，它显示超过底部边框..不包含在“pageContent”中。

基本上这是我的布局...

<div id="pageContent">

<div id="topStatus">
<div id="innerStatus">
*STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED*
</div>
</div>

<div id="profileContent">

<div id="profile_leftside">
*LEFT SIDE APPS*
</div>

<div id="profile_rightside">
*TAB CONTENT*
</div>

</div>

</div>

CSS

#pageContent {
  width: 799px;
  min-height:600px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  float:left;
  border-left:1px solid #b3b3b3;
  border-right:1px solid #b3b3b3;
  border-bottom:1px solid #b3b3b3;
}
#topStatus {
  background: #f7f7f7;
  border-bottom:1px solid #DDDDDD;
  width: 100%;
}
#innerStatus {
  padding: 10px 10px 0px 225px;
   }
#profileContent {
  padding: 8px 0px 8px 10px;
}
#profile_leftside {
  float: left;
  width: 200px;
  position: absolute;
  top: 51px;
}
#profile_rightside {
  float: right;
  width: 580px;
}

只是试图在不破坏底部内容的情况下在左上角获得“profile_leftside”。也许有更好的方式来布置它？

谢谢!

Answer 1

我一直发现 CSS 框架非常有用。其中许多已被一次又一次地证明，它使您抽象了一层，而不必担心特定的 CSS 布局问题。

我已经将 Blueprint CSS 用于很多事情，但也听说过 960 Grid 系统的好消息。

蓝图 CSS:http://www.blueprintcss.org/
960网格系统:http://960.gs/

问候，
克里斯