CSS实现常用布局：两列布局+三列布局+双飞翼布局+圣杯布局

本文目录如下

• 两列布局
  ​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: