<div>
<div class="right"></div>
<div class="left"></div>
<div class="content"></div>
</div>
方法一:采用两边浮动,中间的采用margin,margin的大小跟左右两边的div的宽度决定,
注意事项:两个浮动的div必须放在中间div的上面
.right{
float: left;
width: 400px;
height: 400px;
background-color: red;
}
.left{
float: right;
width: 400px;
height: 400px;
background-color: red;
}
.content{
background-color: black;
/*width: 100%;*/
height: 400px;
margin: 0 410px;
}
方法二:采用绝对定位将两边的right,跟left分别设为0,中间同样采用margin的方法,铺满整个屏
position: absolute;
width: 300px;
height: 400px;
background-color: red;
right: 0;
}
.left{
position: absolute;
left: 0;
width: 300px;
height: 400px;
background-color: black;
}
.content{
background-color: hotpink;
height: 400px;
margin: 0 300px;
}