html - css - 将文本与图像边缘水平对齐

Question

我想将帖子的文本与图片的右边缘水平对齐。即在下图中，我希望文字位于黑线的右侧，与图像一致。有点像 twitter 和 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%）。还有很多方法可以做到这一点，但我认为这是最简单和最推荐的一种。

这里的例子。

Answer 2

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

#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;
}