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;

posted @   蓓蕾心晴  阅读(1322)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae