主要利用 margin-bottom为一个极大的负值与padding-bottom为一个与之相反的正数，利用父元素的overflow做一个视觉欺骗。
整体视觉效果如下
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>帅气的zf</title>
<style>
#test{overflow:hidden; zoom:1;}
#left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:coral; float:left;}
#right{width: 200px; margin-bottom:-3000px; padding-bottom:3000px; background:royalblue;margin-left: 200px;}
</style>
</head>
<body>
<button onclick="addLeft()">addLeft</button>
<button onclick="addRight()">addRight</button>
<div id="test">
<div id="left"></div>
<div id="right"></div>
</div>
<script>
function addLeft(){
var img = document.createElement('img');
img.src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=303034169,1588595531&fm=26&gp=0.jpg";
img.style.width = 100+"px";
img.style.display ="block";
img.style.padding = 50+"px";
document.getElementById('left').appendChild(img);
}
function addRight() {
var img = document.createElement('img');
img.src = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2585481751,3170342118&fm=26&gp=0.jpg";
img.style.width = 100+"px";
img.style.display ="block";
img.style.padding = 50+"px";
document.getElementById('right').appendChild(img);
}
</script>
</body>
</html>
网友评论