双列布局4种方式

双列布局

双列布局就是页面分为左右两侧，左边宽度确定，右侧自适应

1. float 浮动

1. 父元素形成BFC，消除子元素浮动带来的影响。父元素添加 overflow：hidden；
2. 左边元素 设置float：left向左浮动，指定宽度 width：100px;
3. 右侧元素 使用padding-left:100px 隔开左侧元素

	.container{
           border: 3px solid black;
           overflow: hidden;
       }
       .left{
           border: 3px solid blue;
           float: left;
           width:100px;
       }
       .right{
           border: 3px solid red;
           padding-left: 100px ;
       }

2. 绝对定位

1. 父元素： 设置为 相对定位，提供对照
2. 左边元素 ： 设置绝对定位 设置宽度 靠左边
3. 右边元素： 设置绝对定位 设置左边距离，值为左边元素宽度，右边距离为0，这是为了宽度自适应

	.container{
            border: 3px solid black;
            position: relative;
        }
        .left{
            border: 3px solid blue;
            position: absolute;
            width:100px;
            left:0;
        }
        .right{
            border: 3px solid red;
            position: absolute;
            left:100px;
            right:0;
        }

3. flex 弹性盒

1. 父元素： 设置为弹性盒 子元素会变成一行排列
2. 左边元素： 设置宽度
3. 右边元素： 设置弹性系数 flex:1; 默认占满盒子所有剩余空间

	.container{
            border: 3px solid black;
            display: flex;
        }
        .left{
            border: 3px solid blue;
            width:100px;
        }
        .right{
            border: 3px solid red;
            flex:1;
        }

4. grid 网格

父元素： 设置display：grid
设置grid-template-columns: 100px 1fr; 固定第一列宽度为100px 第二列自动占满剩余空间

	.container{
            border: 3px solid black;
            display: grid;
            grid-template-columns: 100px 1fr;
        }
        .left{
            border: 3px solid blue;
        }
        .right{
            border: 3px solid red;
        }