css - 显示 - 带有 div 的文本侧图像

Question

我有以下情况（我用图片表达）：

第一种情况：下图中有一小段文字，已经遇到第一个问题。我列表的边缘也不服从图片：（。希望她总是没有收到我的信息，无论信息大小。

第二种情况：当我们有很长的文字时，它不服从他最终跌倒（没有走到图像的一边）

我期望的结果如下：

必须在我的css中进行一些对齐，因为我不是该主题的专家，只是知道我在某些事情上的方式。有人设法来帮助我？按照我的文件 jsFiddle。已经非常感谢投入的时间:) HERE 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，这是我最近才学会的一个有用的技巧：

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

display: block;
overflow: auto;

^{（ A<div>也可以工作，而不是display: block）}

并li：

overflow: auto;

示例： http: //jsfiddle.net/L6Pwq/14/
另见：CSS：使用溢出清除浮动