問題舉例:
<!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>