<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0; /*外边距*/
padding: 0; /*内边距*/
}
.right{
height: 100px;
width: 100px;
background-color: #fcc;
/*脱离文档流，绝对定位*/
position: absolute;
right: 0;
/*透明度，范围0~1*/
/*opacity: 0.5;*/
}
.left{
height: 100px;
/*不设置宽度，让其自适应浏览器的宽度*/
/*右边让出区域，不至于被盖住*/
margin-right: 100px;
background-color: #ffc;
}
.red{
height: 100px;
width: 50%;
background-color: red;
position: absolute;
left: 0;
}
.yellow{
height: 100px;
width: 50%;
background-color: yellow;
position: absolute;
right: 0;
}
.wrapper{
height: 100px;
margin-top: 50px;
/*保留原来的位置，相对定位*/
/*position: relative;*/
width: 800px;/*如果不定位的话这一行是无效的，即宽度为浏览器宽度*/
}
</style>
<meta charset="UTF-8">
<title>自适应两栏布局</title>
</head>
<body>
<!-- 注意这两个写的先后顺序 -->
<!-- 注意这两个写的先后顺序 -->
<!-- 注意这两个写的先后顺序 -->
<div class="right">right</div>
<div class="left">left</div>
<div class="wrapper">
<div class="red">1</div>
<div class="yellow">2</div>
</div>
<div>test</div>
</body>
</html>
捕获.PNG
网友评论