html - css - テキストを画像の端に水平に揃える

Question

投稿のテキストを画像の右端に水平に揃えたい。つまり、下の図では、画像に沿って、テキストを黒い線の右側に配置したいと考えています。ツイッターやフェイスブックの投稿のようなものです。

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

それらをコンテナー内の 2 つの個別の div に配置します。どちらも左にフロートし、適切な幅 (左の 1 つは画像の幅、右の 1 つは残りのスペースの幅) と高さ (100%) を持ちます。他にもいろいろ方法はありますが、これが一番簡単でおすすめだと思います。

例はこちら。

Answer 2

これを行う方法はたくさんあります。おそらく、両方を a でラップしてから、次のようにしてテキストをさらに右に移動する必要があります。

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

Answer 3

画像を載せfloat: left;ます。例えば：

img {
    float: left;
}