CSSテキストは画像を囲みます

Question

私は2つの画像を持っています。float:left &他float:rightです。真ん中にテキストがあります。私はテキストが画像の周りを包み込むようにしたい。ここには、HTML & CSSがあります。これでテキストは画像の下に来て、テキストdivにclear:bothを使用することを奨励します。何が間違っているのですか？

<div id="trial" style="border:1px #F5F5F6 solid; width:40%; height:100px; margin-bottom:10px;"> 
    <img src="http://graph.facebook.com/528409771/picture" style="padding:5px;"> </img> 
    <img src="facebook_icon.gif" style="float:right; padding:3px;"></img> 

    <div id="content" style="font-size:12px; padding-bottom:5px; clear:both;"> 
     <span style="color:grey;"> from: </span> <a href="http://touch.facebook.com/profile.php?id=63441126719">A.R.Rahman</a><br>  <span style="color:grey;"> I am very grateful to the <b style="color:black;">Hollywood </b> Foreign Press, for recognizing our film. To collaborate with Danny Boyle is a joy in itself, and to receive recognition for the score makes it all the more joyous. This is a blessing beyond words.</span> 
    </div> 
    <span style="font-size:10px;"><a style="color:#476B00;" href="http://touch.facebook.com/profile.php?id=63441126719">http://touch.facebook.com/profile.php?id=63441126719</a></span> 
    <span style="font-size:9px; float:right; clear:both; color:grey;">34 seconds ago</span> 
</div> 

Answer 1

これを試してみてください：私はあなたのイメージタグをクリーンアップしました

<div id="trial" style="border:1px #F5F5F6 solid; width:40%; height:100px; margin-bottom:10px;"> 
    <img src="http://graph.facebook.com/528409771/picture" style="padding:5px; float:left;" /> 
    <img src="facebook_icon.gif" style="float:right; padding:3px;" /> 

    <div id="content" style="font-size:12px; padding-bottom:5px;"> 
     <span style="color:grey;"> from: </span> <a href="http://touch.facebook.com/profile.php?id=63441126719">A.R.Rahman</a><br>  <span style="color:grey;"> I am very grateful to the <b style="color:black;">Hollywood </b> Foreign Press, for recognizing our film. To collaborate with Danny Boyle is a joy in itself, and to receive recognition for the score makes it all the more joyous. This is a blessing beyond words.</span> 
    </div> 
    <span style="font-size:10px;"><a style="color:#476B00;" href="http://touch.facebook.com/profile.php?id=63441126719">http://touch.facebook.com/profile.php?id=63441126719</a></span> 
    <span style="font-size:9px; float:right; clear:both; color:grey;">34 seconds ago</span> 
</div> 

1. （彼らは</img>必要はありません - imgタグの終わりにちょうど/>）を

2. I clear:bothを削除しました。画像を囲むようにしたい場合は不要です。

3. 私はfloat:leftを最初のイメージに追加して、そのテキストを囲むこともできます。

また、すべてのスタイルをインラインにするよりも、別のスタイルシートを使用することをおすすめします。

Answer 2

clear:bothはこの問題の一部です。 clearは、私は私の隣に浮きが欲しくないと言います。あなたはそれを取り除きたいので、最初の画像はfloatになっていません。