封面+轮廓布局

Question

我正在尝试构建像个人资料/封面布局的Facebook，但我正在努力使用正确的布局。

到目前为止我有什么：

http://jsfiddle.net/kvEBF/

<div class="user_profile_cap">

      <div class="user_profile_cover">
        <img src="jpgfile" alt=""/>
      </div>

      <div class="user_profile_headline">
        Pull Right Text
      </div>

    </div>

CSS

.user_profile_cap {
  width: 970;
  height: auto 9;
  border: 1px solid #DDD;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.user_profile_cover {
  img {
    width: 970px;
    height: 115px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

}

.user_profile_headline {
  padding: 10px;
  font-size: 16px;
}

http://jsfiddle.net/kvEBF/

所需的布局

我正在努力将Profile Picture，Page Title和Right Text正确放入此布局。

有人可以帮帮我吗？

Answer 1

喜欢这个

<强> working demo

<强> CSS

    .user_profile_cap {
  width: 970;
  height: auto 13;
  border: 1px solid #DDD;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    overflow:hidden;
}

.user_profile_cover {
  img {
    width: 970px;
    height: 115px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
        }

}

.user_profile_headline {
  padding: 10px;
  font-size: 16px;
}
.user_profile_headline img{
    border:1px solid #EEEEEE;
    width:124px;
    height:124px;
    float:left;
    margin:-90px 10px 0  0;
    position:relative;
    z-index:111;

    background-color:white;
}
.user_profile_headline h2{

    margin:0;
    padding:0;
    font-size:12px;
    font-weight:bold;
    display:block;   
}
.user_profile_headline span{
    font-size:10px;
    font-family:verdana;
    color:gray;

}