CSS文字環繞圖像

Question

我有2個圖像，其中一個float:left &其他float:right。我有中間的文字。我想要文字環繞圖像。這是CSS的HTML &。有了這個文本下面的圖像，儘管在文本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. 我刪除了clear:both - 如果您希望文字環繞圖像，則不需要。

3. 我將float:left添加到第一張圖片，以使文本環繞它。

我還建議使用單獨的樣式表，而不是將所有樣式內聯。

Answer 2

clear:both是問題的一部分。 clear說我不想在我旁邊有任何浮標，所以你想刪除它，並且第一個圖像不是float ed左邊。