div元素下的图片不能置顶解决办法
正常我们写一个左右两列，左侧一列放置图片的html，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="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 nowrap;
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;
}
</style>
</head>
<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&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，则会产生这个问题;
由于html有默认行高，或者设置了默认字体大小。
注意：
这里还有个img 5px缝隙的问题
解决办法有三：
1、图片父元素设置font-size:0;
2、图片设置 display:block；
3、图片设置 vertical-align:bottom;
4、图片设置 margin-bottom:-5px;
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-03-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读