css - 水平对齐文本边缘

Question

我想将帖子的文字水平与图片的右边缘对齐。即在下图中，我希望文本位于黑线的右侧，与图像一致。有点像推特和Facebook帖子。

我如何用css做到这一点？ 感谢

[编辑]

继承了一些HTML和CSS：

HTML：

<div class="post-container"><img class="avatar" src="/static/images/11_48.jpeg"><span class="post"> <b>Daniel</b> 
<p> asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd asdfasd </p> </span>
</div>

CSS：

.avatar {
float: left;
margin-right:5px;
vertical-align:text-top;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;  
-moz-border-radius: 4px;
border-radius: 4px;
}

Answer 1

将它们放在一个容器内的两个独立的div中，它们都向左浮动并具有适当的宽度（左边一个应该是图像的宽度，右边一个是空间其余部分的宽度）和高度（100％）。还有很多方法可以做到这一点，但我认为这是最容易和最推荐的方法。

示例here。

Answer 2

有很多方法可以做到这一点。您应该只是将两者都包装在一起，然后通过执行以下操作将文本向右移动：

#text {
left: 100px; /* or however far you want it */
}

Answer 3

不需要将图像和段落分成2个div。 不需要更改课程头像中的任何内容。 为p添加以下样式。 然后你会得到你想要的东西。

.text_align {
    padding-left: 20px; /* or ajust it with your needs */
    margin-left: 20px;
}

Answer 4

将float: left;放在图片上。例如：

img {
    float: left;
}