顯示-側面帶有div的文字圖片<li>

Question

我有以下情況（我用圖片表示）：

第一種情況：下圖中的文字很小，並且已經遇到第一個問題。 我列表的邊緣也沒有遵循圖片：（。希望她總是不聽我的消息，無論消息大小如何。

第二種情況：當我們有很長的文字時，它不會服從他的跌落（沒有到達圖像的側面）

我期望的結果如下：

我的css必須一定要保持一致，因為我不是該主題的專家，只是知道我在某些方面的做法。 有人設法來幫助我嗎？ 關注我的文件jsFiddle。 已經非常感謝您為投入的時間而感激:) JSFIDDLE DEMO

 li {

    border-bottom:1px solid gray;
     text-align: left;
    display:block;
}
.chat-window-user-img > img {
    height:50px;
    width:50px;
    float:left;
    padding:5px;
}
.chat-window-user-message{
   direction: ltr;    
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
   border-collapse: collapse;
   border-spacing: 0;

}

Answer 1

這兩個問題都可以通過overflow: auto來解決overflow: auto ，這是我最近才學到的一個有用技巧：

添加到.chat-window-user-message ：

display: block;
overflow: auto;

^{（ <div>也會起作用，而不是display: block ）}

對li ：

overflow: auto;

示例 ： http ： //jsfiddle.net/L6Pwq/14/
另請參閱 ： CSS：使用浮點清除浮點數