6个回答
展开全部
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、所以当放大或缩小浏览器窗口时，环绕效果会跟随着变化。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
实现文字环绕效果需要先设定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、运行的结果如下：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<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>
<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
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
align属性
<img src="" align="top"/>
<img src="" align="top"/>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
要在网页中实现图文环绕效果，其实很简单，不用分列或用多个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;">
此处是图片说明文字。
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;">
此处是图片说明文字。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
