img图片撑篙div层的怪异问题。

最新推荐文章于 2021-09-08 11:01:45 发布

刘贵庆

最新推荐文章于 2021-09-08 11:01:45 发布

阅读量304

点赞数

分类专栏：前端文章标签： html css

本文为博主原创文章，未经博主允许请勿转载，切勿用于商业用途，若有引用请加原文链接。

本文链接：https://blog.csdn.net/xysxlgq/article/details/107040136

版权

前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题举例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
 <div style="float:left;width:50%"><img style="width:100%" src="test2.png" ></div>
    <div style="float:left;width:50%"><img style="width:100%" src="test1.png" > </div>
</div>
<div>
<div id="wz" style="color:blue;">文字1</div>
<div></div>
</div>
</body>
</html>

运行:

出现的诡异问题:图片比较大时，id为‘wz’的div层会出现在第二个图片层位置。如图：

解决方法：动态定高。（必须用id获取高。）

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="divhe" >
<div style="float:left;width:50%"><img id="imgh" style="width:100%" src="test2.png" ></div>
<div style="float:left;width:50%"><img style="width:100%" src="test1.png" > </div>
</div>
<div >
<div id="wz" style="color:blue;">文字1</div>
<div></div>
</div>
<script type="text/javascript">
window.οnlοad=function(){
var imgsHeight = document.getElementById('imgh').offsetHeight;
var hei=imgsHeight+5;
document.getElementById('divhe').style.height = hei+"px";
}

</script>
</body>
</html>