Question

我有两张图片，一张float:left＆amp;其他float:right。我在中间有文字。我希望文字环绕图像。这是HTML＆amp; 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>

我已清理了您的图片代码（他们不需要</img> - 只需在img代码的末尾添加/>
我删除了clear:both - 如果您希望文本环绕图像，则不需要它。
我在第一张图片中添加了float:left，同时也让文字能够将其包围起来。

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

Answer 2

clear:both是问题的一部分。 clear说我不希望我旁边有任何花车，所以你要删除它，第一张图片不是float左边。

CSS文本环绕图像

2 个答案: