css文字环绕，图片在文字左边任意位置

先看下面的效果：


常规的文字环绕，被文字围绕的内容在段落的左上角或者右上角，方法很简单，给这个被环绕的节点一个浮动就可以了，像首字下沉、文字环绕图片等等。下面介绍两种方法，实现图片文字左侧的任意位置，例如，在段落左上角、在段落中间或者在段落的底部，先运行下面的代码，看下效果(尝试增加和删减文字的数量，看看会有什么问题)：
注：运行没有效果，请复制本代码到本地运行。

<div style="width:500px; overflow:hidden; _zoom:1;"> <div style="float:left; height:200px; width:1px;"></div> <div style="float:left; clear:left; margin:25px"> <a href="#" target="_blank"> <img src="http://www.5imoban.net/uploads/allimg/140725/1-140H51032230-L.jpg" border="0" /> </a> </div> <P> 初冬的古都南京，别有一番韵味。2008年11月10——12日，第二届全国课改实验区苏教版小学语文课堂教学大赛在南京隆重举行，41节语文课精彩纷呈，让听课的评委、老师和上课的老师、学生一起心跳、共同成长。合肥市华府骏苑小学的刘爱玲老师作为合肥市唯一参赛教师不负众望，一举夺得大赛的特等奖。冬的古都南京，别有一番韵味。2008年11月10——12日，第二届全国课改实验区苏教版小学语文课堂教学大赛在南京隆重举行，41节语文课精彩纷呈，让听课的评委、老师和上课的老师、学生一起心跳、共同成长。合肥市华府骏苑小学的刘爱玲老师作为合肥市唯一参赛教师不负众望，一举夺得大赛的特等奖。冬的古都南京，别有一番韵味。2008年11月10——12日，第二届全国课改实验区苏教版小学语文课堂教学大赛在南京隆重举行，41节语文课精彩纷呈，让听课的评委、老师和上课的老师、学生一起心跳、共同成长。合肥市华府骏苑小学的刘爱玲老师作为合肥市唯一参赛教师不负众望，一举夺得大赛的特等奖。 　　刘爱玲老师执教《厄运打不垮的信念》一课，教学目标层次分明，思路简洁，学法指导有效，得到来自全国各地的语文教学专家和听课老师的一致好评。刘爱玲老师取得的成绩离不开个人的努力，更离不开集体的智慧。在磨课过程中，合肥市教研室刘学山老师、蜀山区教研室苏家云老师、蜀山区语文课改指导组成员多次听评，精心指导。参赛前，蜀山区教育局黄先繁书记、王雪梅副局长、教研室张发东、李德山主任也给予热情鼓励，为刘爱玲老师送行。刘爱玲老师的荣誉激励着每一位老师，更加坚定了我们走教师专业化成长道路。 </P> </div>
提示：您可以先修改部分代码再运行

通过运行上面的代码，发现图片的确实现了文字环绕，并且处于文字的中间，修改宽度为1px的div的高度，可以调整图片的位置，原理就是这个1px宽的div和图片都左浮动，再清除图片受左浮动的影响，这样，1px的div就会把图片挤下去，调整这个div的高度，就可以调整图片在段落的高度。但是，修改了了文章的高度后，图片的位置不变，如果，文字太少，就会发现图片“掉”下来了。 再运行下面的代码，并且尝试增删段落文字的数目，看看效果：

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script> $(function(){ var p_height=$("p").height(); var margintop = 300; $("#div1px").css("height",p_height-margintop+"px"); }) </script> <div style="width:500px; overflow:hidden; _zoom:1;"> <div id="div1px" style="float:left; width:1px;"></div> <div id="div_ad" style="float:left; clear:left; margin:25px"> <a href="#" target="_blank"> <img src="http://www.5imoban.net/uploads/allimg/140725/1-140H51032230-L.jpg" border="0" /> </a> </div> <P> 初冬的古都南京，别有一番韵味。2008年11月10——12日，第二届全国课改实验区苏教版小学语文课堂教学大赛在南京隆重举行，41节语文课精彩纷呈，让听课的评委、老师和上课的老师、学生一起心跳、共同成长。合肥市华府骏苑小学的刘爱玲老师作为合肥市唯一参赛教师不负众望，一举夺得大赛的特等奖。 　　刘爱玲老师执教《厄运打不垮的信念》一课，教学目标层次分明，思路简洁，学法指导有效，得到来自全国各地的语文教学专家和听课老师的一致好评。刘爱玲老师取得的成绩离不开个人的努力，更离不开集体的智慧。在磨课过程中，合肥市教研室刘学山老师、蜀山区教研室苏家云老师、蜀山区语文课改指导组成员多次听评，精心指导。参赛前，蜀山区教育局黄先繁书记、王雪梅副局长、教研室张发东、李德山主任也给予热情鼓励，为刘爱玲老师送行。刘爱玲老师的荣誉激励着每一位老师，更加坚定了我们走教师专业化成长道路。 初冬的古都南京，别有一番韵味。2008年11月10——12日，第二届全国课改实验区苏教版小学语文课堂教学大赛在南京隆重举行，41节语文课精彩纷呈，让听课的评委、老师和上课的老师、学生一起心跳、共同成长。合肥市华府骏苑小学的刘爱玲老师作为合肥市唯一参赛教师不负众望，一举夺得大赛的特等奖。 　　刘爱玲老师执教《厄运打不垮的信念》一课，教学目标层次分明，思路简洁，学法指导有效，得到来自全国各地的语文教学专家和听课老师的一致好评。刘爱玲老师取得的成绩离不开个人的努力，更离不开集体的智慧。在磨课过程中，合肥市教研室刘学山老师、蜀山区教研室苏家云老师、蜀山区语文课改指导组成员多次听评，精心指导。参赛前，蜀山区教育局黄先繁书记、王雪梅副局长、教研室张发东、李德山主任也给予热情鼓励，为刘爱玲老师送行。刘爱玲老师的荣誉激励着每一位老师，更加坚定了我们走教师专业化成长道路。 初冬的古都南京，别有一番韵味。2008年11月10——12日，第二届全国课改实验区苏教版小学语文课堂教学大赛在南京隆重举行，41节语文课精彩纷呈，让听课的评委、老师和上课的老师、学生一起心跳、共同成长。合肥市华府骏苑小学的刘爱玲老师作为合肥市唯一参赛教师不负众望，一举夺得大赛的特等奖。 　　刘爱玲老师执教《厄运打不垮的信念》一课，教学目标层次分明，思路简洁，学法指导有效，得到来自全国各地的语文教学专家和听课老师的一致好评。刘爱玲老师取得的成绩离不开个人的努力，更离不开集体的智慧。在磨课过程中，合肥市教研室刘学山老师、蜀山区教研室苏家云老师、蜀山区语文课改指导组成员多次听评，精心指导。参赛前，蜀山区教育局黄先繁书记、王雪梅副局长、教研室张发东、李德山主任也给予热情鼓励，为刘爱玲老师送行。刘爱玲老师的荣誉激励着每一位老师，更加坚定了我们走教师专业化成长道路。 </P> </div>
提示：您可以先修改部分代码再运行

通过修改发现，无论增加文字和删减文字数量(当然，文字的高度不能低于图片)，图片始终保持在相应的位置，这是通过jQuery获取段落高度，动态修改1px宽的div的高度实现的。完美解决。如果要调整图片在段落的位置，可以修改下面的参数：

var marginbottom = 300;

这个参数就是图片距离顶部的距离，也就是1px的div的高度。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！