Question

我正在尝试为网络构建个人资料页面...类似于Facebook个人资料页面。我需要选项卡所在的背景在左侧的个人资料照片下...所以当用户更新他们的状态时，它会在照片下方垂直增长。请查看Facebook个人资料页面。我已尝试将状态置于顶部“topStatus”，其位置为：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/

的问候，
克里斯

Answer 2

向JSFIDDLE.NET添加任何CSS问题会更容易，因此其他人可以直接查看问题。我已经为您添加了它并提出了我认为您正在寻找的解决方案：http://jsfiddle.net/SqxN7/12/

顶部栏现在随左侧应用扩展。我必须重新组织div的位置并将'overflow：auto'添加到顶部状态栏以允许它展开，因为应用栏是浮动的。

帮助布局

2 个答案: