效果:
css部分:
.big{
float: left;/*对元素都进行浮动*/
background-color: red;
width: 100%;/*对中间父元素设置100%宽*/
height: 300px;
}
.biginner{
background-color: pink;
height: 200px;
margin: 0px 200px 0px 100px;/*对中间子元素设置左右外边距*/
}
.left{
float: left;
background-color: green;
width: 100px;
height: 100px;
margin-left: -100%;/*这里的100%指的是outer的宽度,使得.left到达左空白处*/
}
.right{
float: left;
background-color: blue;
width: 200px;
height: 100px;
margin-left: -200px;/*这里向左移动.right的宽度,使.right到达右空白处*/
}
HTML部分:
<div class="outer">
<div class="big">
<div class="biginner">
AAAAAAAAAA
</div>
</div>
<div class="left">
BBBBBBBBBBBBBBBBB
</div>
<div class="right">
CCCCCCCCCCCCCCCCCC
</div>
</div>