我想使文章的文字与图片的右边缘水平对齐。即,在下面的图片中,我希望文本位于黑色线条的右侧,与图像对齐。有点喜欢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;
}
最佳答案
将它们放在容器中的两个单独的div中,它们都向左浮动,并具有适当的宽度(左侧应为图片的宽度,右侧应为其余空间的宽度)和高度(100%)。还有很多方法可以做到这一点,但是我认为这是最简单,最推荐的方法。
示例here。