避免文字在圖片周圍流動

Question

我正在寫一個聊天，我想在右側傳入消息，並在左側傳出。每條消息都有用戶圖片，名稱，消息，時間。 我的問題是，我無法設法讓文字不在圖片下流動。

http://jsfiddle.net/4MVd2/2/

我的其他問題會那麼，如何獲得從文權，而不在HTML改變順序，以及如何正確的圖片來獲取用戶名與圖片頂端對齊。

謝謝！

Answer 1

.messagetext{ 
    display:inline-block; 
} 
.incomingMessage img{float:right;} 
.outgoingMessage img{float:left;}​ 

這應該讓你去。現在你只需要調整這個圖像，我不確定你是否想要它在頂部或底部，什麼不是。

http://jsfiddle.net/4MVd2/10/

編輯：解決您的形象定位，我沒有看到，我第一次通讀。這應該是你想要的。

Answer 2

對不起，我完全錯過了問題float: right上的圖像應該修復它的CSS。 http://jsfiddle.net/4MVd2/8/

Answer 3

1）您可能想要將圖像轉換爲塊級元素，並給它們足夠高的底部邊框以防止文本在圖像下方潛行（無論您是否擁有固定的消息行高度）。

.message img { 
    height: 40px; 
    width: 40px; 
    display: block; 
} 

.incomingMessage img { 
    float:right; 
    margin: 0 0 3em 0.8em; 
} 

.outgoingMessage img { 
    float:left; 
    margin: 0 0.8em 3em 0; 
} 

2）圍繞該代碼塊添加一個包裝容器，並將其浮動而不是圖像和消息內容。

Answer 4

我同意Chris Sobolewski，並學會了如何使用他的inline-block。我曾經使用過的一種方法是使用名爲`clearfix'的類。

第一條浮法你的形象是這樣的：

.incomingMessage img{float:right;} 
.outgoingMessage img{float:left;}​ 

然後添加一個類clearfix這樣的：<div class="message incomingMessage clearfix">

這裏是clearfix：

.clearfix:before, 
.clearfix:after { 
    content:""; 
    display:table; 
} 
.clearfix:after { 
    clear:both; 
} 
/* For IE 6/7 (trigger hasLayout) */ 
.clearfix { 
    zoom:1; 
}