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

发布网友发布时间：2022-02-24 01:23

我来回答

共6个回答

热心网友时间：2022-02-24 02:52

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

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

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

<style>

p {border:1px solid red;}

img {float:left; margin:0 5px 5px 0;}

</style>

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

5、由于在引入图片时我们用到的语句是<img src="Penguins.jpg" style="width: 50%;height:auto"/>，这表明图片的大小是会随着浏览器窗口的大小调整而自动调整的。

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

热心网友时间：2022-02-24 04:10

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

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

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字环绕</title>
<style>
div {
width:300px;
border:1px solid green
}
img {
float:left;
width:120px;
height:120px
}
</style>
</head>
<body>
<div>
<img src="img.gif" alt="图片" />
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
</body>
</html>

2、运行的结果如下：

热心网友时间：2022-02-24 05:45

img{float:left;}

热心网友时间：2022-02-24 07:36

<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>

<body>
<img src="..." />(省略号为图片路径)
<p>
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.
</p>
</body>

参考资料：http://www.w3school.com.cn/tiy/t.asp?f=csse_float

热心网友时间：2022-02-24 09:44

align属性
<img src="" align="top"/>

热心网友时间：2022-02-24 12:09

要在网页中实现图文环绕效果，其实很简单，不用分列或用多个div，只需要给<img>图片标签加上float浮动属性就行了。
1、图片在左、文字在右：
<img src="logo1/1.jpg" width="239" height="227" style="float:left;">
此处是图片说明文字。
2、图片在右、文字在左：
<img src="logo1/1.jpg" width="239" height="227" style="float:right;">
此处是图片说明文字。