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

CSS图文排版

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

原创最新推荐文章于 2024-04-22 20:07:06 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #firefox #border #google #float #工具

Web开发专栏收录该内容

23 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

导读：

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

您可能感兴趣的与本文相关的镜像