html - 试图为消息实现这种样式

Question

我正在尝试将此设计实施到我正在开发的网站中，但我似乎遇到了一些麻烦。我如何完成这种造型。

http://i255.photobucket.com/albums/hh140/testament1234/message_zps7c5582b0.jpg

<div class="row">
  <div class="span12">
    <div id="message-container">
      <div class="message">
        <img src="images/message_avatar.jpg" alt="Profile Avatar" />
        <h2>Charles Geschke</h2>
        <h3 class="time">10:00 A.M</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum a nunc sit amet bibendum. Vivamus vel eros at turpis volutpat euismod quis eget dui. Nunc a ultrices lacus, eget porta ipsum. Phasellus vel ornare urna. Cras accumsan ipsum a dui vestibulum mattis. Aenean a arcu porttitor quam molestie auctor.</p>
      </div>
    </div>
  </div>
</div>

.message{background-color:#eeeeee; padding:10px}
.message h2{margin-bottom:10px}
.message img{float:left; margin-right:10px;}

这是我尝试过的编码，但由于图像浮动且文本位于下方，因此无法正常工作

代码笔

Answer 1

HTML：

<div class="row">
  <div class="span12">
    <div id="message-container">
      <div class="message">
        <img src="images/message_avatar.jpg" alt="Profile Avatar" />
        <div class="entry-content">
        <h2>Charles Geschke</h2>
        <h3 class="time">10:00 A.M</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum a nunc sit amet bibendum. Vivamus vel eros at turpis volutpat euismod quis eget dui. Nunc a ultrices lacus, eget porta ipsum. Phasellus vel ornare urna. Cras accumsan ipsum a dui vestibulum mattis. Aenean a arcu porttitor quam molestie auctor.</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.message img,
.message .entry-content{
    display:inline-block; 
    vertical-align:middle;
}

Answer 2

我会单独包装图像中的内容。

wrap1) 使用as id包装内容。

2）使用作为id包装标题（h2和）。h3wrapHeader

HTML：

<div class="message">
    <img src="http://placehold.it/100x100" alt="Profile Avatar" />
    <div id="wrap">  <!-- Wrap the conents-->
        <div id='wrapHeader'>
             <h2>Charles Geschke</h2>
             <h3 class="time">10:00 A.M</h3>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum a nunc sit amet bibendum. Vivamus vel eros at turpis volutpat euismod quis eget dui. Nunc a ultrices lacus, eget porta ipsum. Phasellus vel ornare urna. Cras accumsan ipsum a dui vestibulum mattis. Aenean a arcu porttitor quam molestie auctor.</p>
    </div>
</div>

CSS：

#wrap {
    margin-left: 115px;
    display: inline-block;
    float: right;
}
#wrapHeader h2, h3 {
    display: inline-block;
}
#wrapHeader h3 {
    float: right
} 

检查这个JSFiddle

Answer 3

尝试添加padding-left到所有文本元素（我也建议为图像使用固定宽度）。您可以丢失margin-right并仅在填充中进行补偿。

.message img{
    float:left;
    width:100px;
}
.message p,
.message h2,
.message h3{
        padding-left:110px;
}

http://jsfiddle.net/daCrosby/R7zaq/