本文目录如下
- 两列布局
1、父级为flex容器,左子固定,右子flex:1
2、父级relative定位,左子absolute定位,右子设margin-left
3、左子浮动,右子溢出
4、左子右子浮动,右子width:cal(100% - 左子width) - 三列布局
1、排序左右中,position+left+right
2、排序左右中,float左右
3、排序左中右,父级flex容器,左右子分别absolute left right,中flex:1
4、排序左中右,父级table,左右子table-cell,中设margin左右 - 双飞翼布局
- 圣杯布局
• 两列布局
• 1、父级为flex容器,左子固定,右子flex:1
.wrap{
display: flex;
width: 100%;
height: 500px;
}
.left{
width: 200px;
background-color: blue;
}
.right{
flex:1;
background-color: red;
}
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
• 2、父级relative定位,左子absolute定位,右子设margin-left(左右子要设置height)
.wrap{
position: relative;
width: 100%;
}
.left{
position: absolute;
width: 200px;
height: 500px;
left: 0;
top: 0;
background-color: blue;
}
.right{
margin-left: 200px;
height: