CSS文字环绕图像

我有2个图像，其中一个float:left &其他float:right。我有中间的文字。我想要文字环绕图像。这是CSS的HTML &。有了这个文本下面的图像，尽管在文本div上使用clear:both。我究竟做错了什么？CSS文字环绕图像

<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>

来源

2010-12-15 Srikar Appalaraju

试试这个：

<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>

我清理自己的图片广告（他们并不需要</img> - 只是一个/>在img标签的结尾）
我删除了clear:both - 如果您希望文字环绕图像，则不需要。
我将float:left添加到第一张图片，以使文本环绕它。

我还建议使用单独的样式表，而不是将所有样式内联。

来源

2010-12-15 12:54:52 SMSidat

只需在HTML 4.01/XHTML中使用'/>'，在HTML5中只需使用'>' – 2013-11-12 09:58:21

clear:both是问题的一部分。 clear说我不想在我旁边有任何浮标，所以你想删除它，并且第一个图像不是float ed左边。

来源

2010-12-15 12:54:28 tjm

CSS文字环绕图像

回答

相关问题