CSS实现文字环绕图片的效果

这篇文章主要为大家详细介绍了css文字环绕图片遇到的问题及解决方法，感兴趣的小伙伴们可以参考一下

CSS实现文字环绕图片效果

文字环绕图片，在Word里只要click一下右键，调一下属性就可以了。但在HTML文档里就没有直接属性了。因此我们可以借助CSS来实现这一效果。

我们先设定float的参数，如果图片需要左对齐设为left，若右对齐则为：right。此外，我们还可以根据需要设置图片和文字间隔的空间，同样适用CSS的padding。

例：

立即学习“前端免费学习笔记（深入）”；

登录后复制

将这一个图片标识语句，插入到页面文字中间，就OK啦！

（一）文字环绕图片实例

p {   width:300px;   border:1px solid green   }   img {   float:left;   width:120px;   height:120px   }    
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕

登录后复制

以上就是CSS实现文字环绕图片的效果的详细内容，更多请关注【创想鸟】其它相关文章！