img圖片撐篙div層的怪異問題。

問題舉例:

<!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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章