300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 图片四周环绕 html语言 CSS实现文字环绕图片效果

图片四周环绕 html语言 CSS实现文字环绕图片效果

时间:2020-11-18 16:05:13

相关推荐

图片四周环绕 html语言 CSS实现文字环绕图片效果

CSS实现文字环绕图片效果

文字环绕图片,在Word里只要click一下右键,调一下属性就可以了。但在HTML文档里就没有直接属性了。因此我们可以借助CSS来实现这一效果。

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

例:

复制代码代码如下:

将这一个图片标识语句,插入到页面文字中间,就OK啦!

(一)文字环绕图片实例

XML/HTML Code复制内容到剪贴板

文字环绕

div{

width:300px;

border:1pxsolidgreen

}

img{

float:left;

width:120px;

height:120px

}

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。