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

最新推荐文章于 2024-04-22 20:07:06 发布

firefoxboy

最新推荐文章于 2024-04-22 20:07:06 发布

阅读量1.1k

点赞数

分类专栏： Web开发文章标签： css firefox border google float 工具

本文链接：https://blog.csdn.net/firefoxboy/article/details/3057241

版权

Web开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

导读：

我们在做布局的过程中常常遇到文字围绕图片的效果。如何用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>

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

<script src="http://www.csscool.cn/script/tuijie_text.js" type="text/javascript"></script> 遵循 web 标准，带有 Google 工具栏的 Firefox
本文转自

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