css - 显示 - 在 <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;

^{(用 <div> 代替 display: block 也可以)}

然后到 li :

overflow: auto;

示例:http://jsfiddle.net/L6Pwq/14/
另见:CSS: Clearing Floats with Overflow