最近做一个公司的网站，有个页面的显示效果必须是字体围绕，图片在左下角，其他三部分被文字包围。没多少做前端页面的经验，都是些修修改改字体，颜色，图片大小什么的。。。这个需求看了半天懵了。好在公司有网络，查找半天，有点被围绕的效果。先把自己看到的环绕效果总结下，直接贴代码：
1.
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<img src="d:\用户目录\pictures\iqiyisnapshot\1491055341(1).png" style="float:left;"></img>你的文字多的话，图片在右上角显示，图片的右边和下边被文字包围。
</body>
</html>
2.
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p style="position:relative;">
<img src="d:\用户目录\pictures\iqiyisnapshot\1491055341(1).png" />
<p style="position:absolute; z-index:2; left:600px; top:10px">
你的文字多的话，图片在左边显示，文字在右边显示。
</p>
</p>
</body>
</html>
3.
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
p.wrap-p-topspacer {
width: 0px;
height: 60px;
float: left;
}
p.wrap-p {
float: left;
clear: both;
margin: 0px 10px 0 0;
<!--height: 80px;-->
<!--width: 25%;-->
text-align: center;
background: #0088cc;
color: #fff;
}
p.wrap-p-right {
float: right;
width: 50%;
}
</style>
</head>
<body>
<p class="wrap-p-topspacer"></p>
<p class="wrap-p"><img src="d:\用户目录\pictures\iqiyisnapshot\1491055341(1).png" /> </p>
<p>你的文字多的话，图片在左偏上部位，图片的上右下都被文字包围，形成三面环绕效果。 </p>
<p class="wrap-p-topspacer"></p>
<!-- <p class="wrap-p wrap-p-right"> 你的另一张图片效果</p>-->
<p>你的另一部分文字。。。。. </p>
</body>
</html>
以上就是字体围绕图片效果的html代码的详细内容。