html - 封面+简介版面

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/

所需的布局

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

有人可以帮我吗？

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;

}