<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box1,.box2{
background: black;
margin-top: 20px;
}
.left1{
float:left;
width:300px;
height:100px;
background-color: #ac2925;
}
.right1{
height: 100px;
background: green;
}
把左边的也浮动起来，这样他就没有了默认宽度，再把宽度设置为100%，这样左边的宽度就等于浏览器宽度，然后把他margin-left一个负紫色块的宽度，这样紫色块就可以浮动上来了，然后由于margin-left了，相当于左移了距离，那么在把里面的内容div进行margin-left一个正值宽度，就可以正常显示了。
.left2-w{
margin-left: 300px;
}
.left2{
float:left;
width: 100%;
height:100px;
margin-left:-300px;
background-color: deepskyblue;
}
.right2{
width:300px;
height:100px;
float: right;
background-color: blueviolet;
}
.box3{
margin-top: 140px;
}
.right3-w{
margin-right: 300px;
}
.left3{
float:left;
width: 300px;
height:100px;
background-color: deepskyblue;
}
.right3{
width: 100%;
height:100px;
float: right;
margin-right: -300px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1">
<div class="left1">左侧固定宽度</div>
<div class="right1">右侧自适应宽度</div>
</div>
<div class="box2">
<div class="left2">
<div class="left2-w">左侧自适应宽度</div>
</div>
<div class="right2">右侧固定宽度</div>
</div>
<div class="box3">
<div class="right3">
<div class="right3-w">右侧自适应宽度</div>
</div>
<div class="left3">左侧固定宽度</div>
</div>
</body>
</html>
网友评论