1、float方法
给左右增加浮动,中间不变,但是一定要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧
两边固定宽度,中间宽度自适应。
利用中间元素的
margin
值控制两边的间距宽度小于左右部分宽度之和时,右侧部分会被挤下去
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中</div>
.left{
background-color: blue;
height: 100px;
width: 100px;
float: left;
}
.middle{
background-color: yellow;
height: 100px;
margin-left: 150px;
margin-right: 150px;
}
.right{
background-color: red;
height: 100px;
width: 100px;
float: right;
}
2、position方法
用绝对定位,不用考虑div的顺序,但是有顶部对齐问题,需要进行调整,中间的高度为整个内容的高度
.left{
background-color: blue;
height: 100px;
width: 100px;
position: absolute;
left: 0;
top: 0;
}
.middle{
background-color: yellow;
height: 100px;
width: 100%;
top: 0;
}
.right{
background-color: red;
height: 100px;
width: 100px;
position: absolute;
right: 0;
top: 0;
}