html - 封面+简介布局

Question

我正在尝试构建一个像 Profile/Cover Layout 这样的 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/

所需的布局

我正在努力将个人资料图片、页面标题和正确的文本正确放置到此布局中。

有人可以帮帮我吗？

Answer 1

像这样

工作演示

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;

}