<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .left{
background-color: #44D207;
height: 300px;
width: 200px;
float: left;
}
.right{
margin-left: 200px;
height: 300px;
background-color: #E71217;
}*//*方法一*/
.left{
background-color: #44D207;
height: 300px;
width: 200px;
float: left;
margin-right: -100%;
}
.rright{
margin-left: 200px;
background-color: #e71217;
height: 300px;
}
.right{
float: left;
width: 100%;
}/*方法二*/
</style>
</head>
<body>
<div class="contain">
<div class="left"></div>
<div class="right">
<div class="rright"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.left{
background-color: #44D207;
width: 200px;
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.right{
margin-left: 200px;
background-color: #E71217;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.contain{
overflow: hidden;
position: relative;
}
.left-bottom{
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 200px;
background: #000;
}
.right-bottom{
position: absolute;
bottom: 0;
right: 0;/*根据具体情况改变*/
height: 1px;
width: 200px;
background: #000;
}
</style>
</head>
<body>
<div class="contain">
<div class="left">
<p>halou</p>
<div class="left-bottom"></div>
<!-- 用这些来模拟底部边框，假如必要的话 -->
</div>
<div class="right">
<div class="right-bottom"></div>
</div>
</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
