div元素下的图片不能置顶解决办法
2020-03-26 16:01:55来源：博客园 阅读 ()
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;
原文链接:https://www.cnblogs.com/beileixinqing/p/12575387.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- 两个div并排，右边div固定宽度，左边宽度自适应 2020-06-03
- 两个div并排，左边div固定宽度，右边宽度自适应 2020-06-03
- 前端CSS五中元素定位类型 2020-06-01
- css：背景（背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
