代码:
<html>
<head></head>
<body>
<div class="first">
<div class="up"></div>
</div>
<div class="second">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
html,body{width:100%;height:100%}
.first{height:50%;}
.up{
width:50%;
height:96%;
margin:0 auto;
border:2px solid red;
}
.second{
height:50%;
position:relative;
}
.left{
float:left;//此处浮动定位和绝对定位均可。若为绝对定位,需增加left和right为0的属性。
width:48%;
height:100%;
border:2px solid red;
}
.right{
float:right;
width:48%;
height:100%;
border:2px solid red;
}
</style>
</body>
</html>
越深入理解css的布局属性,会发现它的复杂性,推荐博客:css布局属性;内容全面,有小错误,自己验证的时候稍加注意即可。
关于css中兼容常见问题:css兼容