嘗試實現郵件的這種樣式

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

嘗試向所有文本元素添加padding-left （我也建議為圖像添加固定寬度）。 您可能會損失margin-right而只是在填充中進行補償。

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

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

Answer 3

我會包裝圖像中的內容。

1）使用wrap作為id包裝內容。

2）使用wrapHeader作為ID包裝標題（ h2和h3 ）。

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