如何用CSS实现文字环绕图片的效果_css文字环绕图片-优快云博客

本文介绍如何使用CSS实现图片左上角定位及文字环绕效果。通过简单的代码示例，展示图片浮动属性的应用，使图片置于左上角，文字自然环绕其右侧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读：

我们在做布局的过程中常常遇到文字围绕图片的效果。如何用CSS实现文字环绕图片的效果呢，通过这个例子就能看出。其实很简单，就是图片浮动位置的调整

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<br><style>
<br>div {
<br>  width:300px;
<br>  height:200px;
<br>  border:1px solid red
<br>  }
<br>img {
<br>  float:left;
<br>  width:100px;
<br>  height:100px
<br>  }
<br></style>
<br><div>
<br><img src="http://bbs.blueidea.com/images/blue/logo.gif" />
<br>我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，
<br>
<br>像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文
<br>
<br>字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上
<br>
<br>角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。
<br></div>

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

遵循 web 标准，带有 Google 工具栏的 Firefox
本文转自

http://www.csscool.cn/css-website/css-text.html