1、float实现
float后的元素仍未脱离文档流。
浮动的元素会成为块级元素,相当于处于原本位置的上一层,占据了一个位置,不会覆盖下一层元素。
css结构
*{
margin: 0;
padding: 0;
}
.left{
width: 150px;
border: 1px solid red;
float: left;
}
.right{
border: 1px solid blue;
margin-left: 150px;
}
dom结构为
<div class="left">左边固定宽度</div>
<div class="right">右边相对宽度</div>
2、固定定位
用position的元素会脱离文档流,处于原本位置的上一层,会覆盖下层元素。
dom结构为
<div class="left">左边固定宽度</div>
<div class="right">右边相对宽度</div>
css结构
*{
margin: 0;
padding: 0;
}
.left{
width: 150px;
border: 1px solid red;
position: absolute;
left:0;
top: 0;
}
.right{
border: 1px solid blue;
margin-left: 150px;
}