CSS实现文字环绕图片的效果-css教程-PHP中文网

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

不言

发布： 2018-06-26 10:19:44

原创

7452 人浏览过

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

CSS实现文字环绕图片效果

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

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

例：

<img style="float:left;padding:20px 20px 20px 20px;" src="/Upic.jpg">

登录后复制

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

（一）文字环绕图片实例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字环绕</title>
<style>
p {   
width:300px;   
border:1px solid green   
}   
img {   
float:left;   
width:120px;   
height:120px   
}    
</style>
</head>
<body>
<p>
<img src="img.gif" alt="图片" />
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
</body>
</html>

登录后复制

效果图：

（二）CSS文字环绕图片遇到的问题及解决方法：

一、前言

需要实现一个文字环绕图片的效果，心想so easy嘛。

1）代码部分

<style> .img-left { border: 3px solid #005588; width:300px; } .img-left img { float:left; /* 对图片进行浮动就可以实现了 */ width:150px; } </style> <p> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>

登录后复制

这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文

2）效果图