html - 避免文字在图片周围流动

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/

编辑: 解决了您的图片定位问题，我第一次通读时没有看到。这应该是您想要的。