正常我们写一个左右两列,左侧一列放置图片的html,如下所示:
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>title</title> <style> .container{ background-color: #fff; box-sizing: border-box; width: 100vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row nowr本末倒置ap; flex-flow: row nowrap; height: 100vh; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .left{ width:50vw; height: 100vh; overflow: hidden; position: relative; } .imagebox{ width: 100%; height: auto; position: absolute; top: 0; } img{ width:100%; height:auto; display: block; } </s大管是什么乐器tyle></head>&l病句练习及答案t;body><div class="container"> <div class="left"> <div class="imagebox"> <img src="http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&fm=26&gp=0.jpg" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&fm=26&gp=0.jpg" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&山东2020年本科线分数是多少amp;fm=26&gp=0.jpg" alt=""> </div> </div></div></body></html>
正常写个demo是可以打开且正常显示的,但是在某些时候(可能是在配置了打包编译等情况),发现图片无论如何好像都在最底下我们看不到的位置展示,不能置顶,终于找到了原因。
解决办法:
给imagebox 设置一个font-size:0px; 或者 设置 line-height:0;
产生问题的原因:
不设置font-size,会继承父元素的font-size,我这里继承了我设置的html的font-size:200vw,则会产生这个问题;
由于h晴雯撕扇tml有默认行高,或者设置了默认字体大小。
注意:
这里还有个img 5px缝隙的问题
解决办法有三:
1、图片父元素设置font-size:0;
2、图片设置 display:block;
3、图片设置 vertical-align:bottom;
4、图片设置 margin-bottom:-5px;
本文发布于:2023-04-07 09:32:21,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/16204ff2d272c024aaab9be8b6f73bfa.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:div元素下的图片不能置顶解决办法.doc
本文 PDF 下载地址:div元素下的图片不能置顶解决办法.pdf
留言与评论(共有 0 条评论) |