如何在一段右对齐文本下对齐元素？

Question

所以我试图用HTML制作一个用户评论的东西。我希望它看起来类似于vimeo's条评论，用户图标和文本右侧对齐。这是我的标记（使用bootstrap容器，但我真的不认为这是问题）：

<div class="comment">
<img src="{{comment.poster.profile.avatar.url}}"  alt="...">
<span><a href="profile link">poster name</a>&nbsp;time</span>
<p>comment body</p>
</div>

和我的CSS：

.comment{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
text-align: left;
width: 800px;
padding: 10px;
  background-color: @secondary;

 img{
    width: 55px;
    height: 55px;
    vertical-align: top;
  }

<span><a href="profile link">poster name</a>&nbsp;time</span>与我想要的图像右上角对齐，但正文最终会出现在图片下方，而不是像我想要的那样在信息下面。这是它的图像，箭头指向我想要文本的位置：

知道我应该怎么做吗？我很难对齐事情，如果这是一个简单的错误，那就很抱歉。谢谢。

Answer 1

以下是如何实现这一目标：

<div class="pic"> <img src="http://placekitten.com/100/100"> </div> <div class="pic-meta"> <span> <a href="profile link">poster name</a> &nbsp;time </span> <span class="comment">comment</span> </div>

和css：

.pic, .pic-meta { float: left; } .comment { display: block; }

http://jsfiddle.net/p4K7u/