div元素下的图片不能置顶解决办法

更新时间:2023-04-07 09:32:23 阅读：评论：0

正常我们写一个左右两列，左侧一列放置图片的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;