700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html float图片和文字不重叠 html 解决图片文字并排显示

html float图片和文字不重叠 html 解决图片文字并排显示

时间:2019-01-06 21:00:07

相关推荐

html float图片和文字不重叠 html 解决图片文字并排显示

最新解决方法

常用情况:

显示图片:

解决方法:

1

2

3 设置成功,请牢记新的登陆密码

4

显示图片:

解决思路:

1.利用inline的vertical-align:middle属性(注意:这个属性只对inline和inline-block有效,对block无效)

2.后面的文字用inline元素包装起来,否则还是会错位

情况1:

1

2

3

4 设置成功,请牢记新的登陆密码

5

显示图片:

解决方法:

设置成功,请牢记新的登陆密码

改变后图片:

解决思路:1.设置外面容器的height和line-height。

2.把显示图片的容易变为inline-block。

3.将图片设置为背景,注意left center,padding-left:(图片的宽度);在显示文字。

情况2:

代码

1

2

3

4 验证码:

5

6

7

8 验证码已发送!

9

10

11

当前效果为:

修改后的代码:

1

2

3 验证码:

4

5

6

7 验证码已发送!

8

9

10

修改后的效果:

解决思路:1.设置外面容器的position:relative;

2.设置图片容器的position:absolute;并指明top:0px;

3.一定要记得margin-left;在图片的下一个标签,或者图片本身。

原文:/vinpho/p/6498850.html

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