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

Question

所以我正在尝试用 HTML 制作用户评论。我希望它看起来类似于 vimeo's评论，用户图标和文本与其右侧对齐。这是我的标记(使用引导容器，但我真的不认为这是问题所在):

<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/