图像显示在文本旁边，但不在文本长于一行时显示

Question

问题图片：

问题的Codepen示例：http://codepen.io/Mave/pen/PwBNKw

图像本身没有应用任何样式。

.img{} (obligated to show at least one line of code here, stackoverflow rules)

我想要的是图像始终位于文本旁边，从不低于它。 编辑：忘记提到它不可能将图像移动到评论div中，因为它是一个Java项目而且我只做前端..

Answer 1

将图像放在评论类中，并将float:right放在其上：

HTML

<div class="comment"><img class="theimage" width="13" border="0" src="http://i.imgur.com/KbsrwhT.png">
  Long comment Long comment Long comment Long comment Long comment Long comment Long comment Long comment Long comment Long comment 
</div>

CSS

.theimage{
    float:right;
}

请参阅codepen：http://codepen.io/anon/pen/YPjqrb

Answer 2

如果您的HTML如下所示，那么您不需要做任何事情，图像将始终在内容之后。

.testing-demo {
display:inline;  
}

    <div class="testing-demo">
     test test test test test test test test test test test test test test test test test test test test test test test test test 
    </div><img class="theimage" width="13" border="0" src="http://i.imgur.com/KbsrwhT.png" />