显示 - <li> </li>中包含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: Clearing Floats with Overflow