CSS代码如何设置图片周围字体环绕？

1、准备一张图片，新建一个空白html文件

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

3、给html添加head标签，在标签中定义样式。

4、用chrome浏览器打开上面的html文件，可以看到文字绕排效果

5、由于在引入图片时我们用到的语句是，这表明图片的大小是会随着浏览器窗口的大小调整而自动调整的。

6、所以当放大或缩小浏览器窗口时，环绕效果会跟随着变化。

实现文字环绕效果需要先设定float的参数，如果图片需要左对齐设为left，若右对齐则为：right。此外，我们还可以根据需要设置图片和文字间隔的空间，同样适用CSS的padding。

工具原料：编辑器、浏览器

1、实现文字环绕图片的效果代码如下：

  
  
  
  
  
  
  
  
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
  
  

2、运行的结果如下：

(省略号为图片路径)

This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

align属性

要在网页中实现图文环绕效果，其实很简单，不用分列或用多个div，只需要给图片标签加上float浮动属性就行了。
1、图片在左、文字在右：

此处是图片说明文字。
2、图片在右、文字在左：

此处是图片说明文字。