css如何实现文字环绕图片的方法

css如何实现文字环绕图片的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

创新互联建站电话联系：18980820575，为您提供成都网站建设网页设计及定制高端网站建设服务，创新互联建站网页制作领域十年，包括成都护栏打桩机等多个领域拥有丰富的网站营销经验，选择创新互联建站，为网站锦上添花。

css文字环绕图片可以利用css属性实现，需要先设定float的参数，如果图片需要左对齐设为left，若右对齐则设为right；下面我们来直接看一下css文字环绕图片的实现代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {   
width:400px;   
border:1px solid green   
}   
img {   
float:left;   
width:120px;   
height:120px;   
}  
</style>
</head>
<body>
<div>  
<img src="images/pandas.jpg" />  
大熊猫（学名：Ailuropoda melanoleuca；英文名称：Giant Panda），属于食肉目、熊科、大熊猫亚科和大熊猫属唯一的哺乳动物，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，它有着圆圆的脸颊，大大的黑眼圈，胖嘟嘟的身体，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。是世界上最可爱的动物之一。</div> 
</body>
</html>

css文字环绕图片的效果如下：

css如何实现文字环绕图片的方法

说明：我们还可以根据需要设置图片和文字间隔的空间，同样适用CSS的padding。

除了上述方法之外还可以利用图片属性实现文字环绕图片，我们来直接看代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<p style="width:400px;">
    <img src="images/pandas.jpg" align="left" width="120" hspace="5" vspace="5">
   大熊猫（学名：Ailuropoda melanoleuca；英文名称：Giant Panda），属于食肉目、熊科、大熊猫亚科和大熊猫属唯一的哺乳动物，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，它有着圆圆的脸颊，大大的黑眼圈，胖嘟嘟的身体，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。是世界上最可爱的动物之一。
</p>
</body>
</html>

文字环绕图片的效果如下：

css如何实现文字环绕图片的方法

说明：设置标签的属性align=“left”即可，如果想让图片居右，文字在左环绕，可以将align属性设置为right，其中 vspace 表示图片与文字的上下距离，hspace表示左右距离。

感谢各位的阅读！看完上述内容，你们对css如何实现文字环绕图片的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

当前文章：css如何实现文字环绕图片的方法
文章转载：https://www.cdcxhl.com/article30/iijepo.html

成都网站建设公司_创新互联，为您提供动态网站、网站导航、、面包屑导航、静态网站、建站公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容