<style>
.head{
width: 100%;
height: 200px;
border: 1px solid red;
}
.main{
border: 1px solid yellow;
position: relative;
}
.first{
width:48%;
height: 210px;
border: 1px solid red;
position: absolute;
left:0;
}
.second{
width: 48%;
height: 210px;
border: 1px solid red;
position: absolute;
left:50%;
}
.end{
width: 100%;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="head">1</div>
<div class="main">
<div class="first">2</div>
<div class="second">3</div>
</div>
<div class="end">4<div>
</body>由于div.first div.second脱离了文档流，所以会出现如图一所示的情况：
可以在.end里面添加
{position:relative;
top:210px;//210px为前面的div的高度
}
可以解决重叠问题。如图二所示：
扫一扫
2495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
