左边固定,右边自适应的两列布局,右面的 DOM 顺序在左边前面 实现
我的第一篇文章,too yang to smpo ,就写个简单的吧
<div class='container'>
<div class='right'></div>
<div class='left'></div>
</div>
两种实现思路:
1 、flex布局
参考文献:flex布局
.container {
display:flex;
flex-direction:row-reverse;
}
.left:{
width:200px;
height:500px;
background-color:'red'
}
.right:{
flex:1,
height:500px;
background-color:'blue'
}
2. absolute
话不多少,直接上代码,调试通过;
.container {
position: relative; // 这句一定要,定位以祖宗中第一个非static为准进行绝对定位
}
.left {
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
background-color:red;
}
.right {
padding-left: 200px;
width: 100%;
height: 300px;
background:blue
}
看效果:
over!