首页 > 建站教程 > Div+Css >  css文字环绕,图片在文字左边任意位置正文

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

先看下面的效果:


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


提示:您可以先修改部分代码再运行

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


提示:您可以先修改部分代码再运行

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