html+css如何实现文字环绕图片的效果

本文主要介绍html如何搭配CSS实现文字环绕图片,即文字绕排的效果。

操作方法

  • 01

    准备一张图片,新建一个空白html文件

  • 02

    其中html文件内容如下图所示,html中包含了一张图片,及对应的描述段落

  • 03

    给html添加head标签,在标签中定义样式。 <style> p {border:1px solid red;} img {float:left; margin:0 5px 5px 0;} </style>

  • 04

    用chrome浏览器打开上面的html文件,可以看到文字绕排效果,如下图所示

  • 05

    由于在引入图片时我们用到的语句是<img src="Penguins.jpg" style="width: 50%;height:auto"/>,这表明图片的大小是会随着浏览器窗口的大小调整而自动调整的。 所以当放大或缩小浏览器窗口时,环绕效果会跟随着变化。

  • 06

    如果要清除文字绕排效果,只需将float: letf样式定义删除即可。

(0)

相关推荐

  • indesign怎么设置文字环绕图片的效果?

    indesign怎么设置文字环绕图片的效果?

  • wps如何设置文字环绕图片

    wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 操作方法 01 ...

  • wps文档中如何插入图片,且文字环绕图片?

    如何在wps文档中插入图片,且文字环绕图片?事先准备好要插入的图片,然后建立一个wps文档,点击上方的"插入--图片--来自文件",按照图片的保存路径把图片插入到文档中.最后,利用 ...

  • Word文档怎么设置文字环绕图片 设置方法大全

    在报纸中,我们经常会看到一张图片被嵌入到了文字中(如下图),你是不是以为这中效果只有使用专业的排版软件才可以实现?易捷PDF转换成Word可以告诉你,Word中的文字环绕图片功能就可能实现这种排版效果 ...

  • 设置Word2003文字环绕图片的方式

    首先,进入Word后单击菜单栏的“插入”-->图片-->来自文件,然后找到你想要插入的图片,单击“插入”即可! Word中设置文字环绕图片的方法 右键单击图片,在弹出的下拉菜单中选择“设置 ...

  • wps文字环绕图片效果怎样设置

    wps设置文字环绕图片的方法: 打开WPS软件,点击菜单"WPS文字"下的"新建",新建一个文档,如图所示 接着,在文档中输入需要的文字 把光标放在文字中间,点 ...

  • word怎么设置文字环绕图片?

    在Word2003中插入图片以后,我们可能会对一些图片修改一下样式或者是将图片和文字摆放位置稍微作出调整,这里就必须要用到文字环绕图片的功能了,下面小编就为大家介绍word怎么设置文字环绕图片方法,来 ...

  • 在word文档中如何设置文字环绕图片效果

    在word文档编辑文章时,有时需要在文章上插入图片,文字环绕着图片,如图中的效果.是如何做到的呢,详细操作请往下看. 效果如下: 步骤 1.打开word文档,要在文档中插入一张图片. 2.光标在插入图 ...

  • word文字环绕图片设置方法图解

    为了制作出比较专业的图文并茂式的文档,往往需要按照版式需求安排图片位置.那么word怎么设置文字环绕,今天教大家这个技巧怎么使用吧. 步骤: 1.首先打开我们电脑上的word文档 2.把我们需要的内容 ...