文章介绍了二种关于在css中如何让文字很好的环绕图片的方法，有需要的朋友可以来参考一下，我们只用div,css哦，不用table操作哦。
代码如下
复制代码
<style type="text/css">
.callout {
border:1px solid #000;
float:left;
width:275px;
}
.callout h3 {
width:115px;
height:65px;
float:left;
text-indent:-8008px;
background:transparent url(team-report.gif) no-repeat 0 0;
}
.callout * {
width:160px;
float:right;
}
.callout * * {
width:auto;
float:none;
}
</style>
<div class="callout">
<h3>team report graphic, replaced image</h3>
<h2>Team Report 10-06-05</h2>
<ul><li>An <a href="#">anchor tag</a> perhaps?</li>
<li>Or a <strong>strong tag</strong> perhaps?</li>
</ul>
<p>Here's a paragraph too!</p>
</div>
实例二
背景图的方式实现在图片浮动时不让文字内容环绕到图片下方
这个方法的好处是代码简单，使用方便，当然，前提是你不需要在图片上加链接。
代码如下
复制代码
<style type="text/css">
.callout {
background:url('logo.gif') no-repeat 5px 5px;
padding:5px 5px 5px 230px;
border:1px solid #999;
width:60%;
margin:0 auto;
}
.callout h2 {
margin:0;
padding:0;
}
</style>
<div class="callout">
<h2>www.111cn.net - 聚合小段精华代码</h2>
<p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数或者一个验证邮件地址的正则表达式，又或者一个简单的文件上传类，甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。</p>
</div>
实例
HTML代码如下:
代码如下
复制代码
<div class="wrap_area">
<img src="wrap-subject01.jpg" class="no_border" alt="Lunar eclipse photo" />
<div class="shape_wrap">
<div style="width: 250px;"></div>
<div style="width: 280px;"></div>
<div style="width: 305px;"></div>
.
.
.
</div>
<p>Numerous blocks of text</p>
.
.
.
</div>
CSS代码大致如下:
div.wrap_area { position: relative; }
div.wrap_area img { position: absolute; left: 0px; top: 0px; }
div.wrap_area p { position: relative; }
div.shape_wrap div { float: left; clear: left; height: 20px; }
效果如下
