三列布局6种方式

三列布局

1. 浮动

父元素： 设置overflow: hidden; 形成BFC
left和right 向左向右分别浮动 并设置宽度
center： 设置margin：0 100px; 与左右元素隔开 实现自适应

.container{
            border: 3px solid black;
            overflow: hidden;
        }
        .left{
            border: 3px solid blue;
            float: left;
            width: 100px;
        }
        .right{
            border: 3px solid red;
            float: right;
            width: 100px;
        }
        .center{
            border: 3px solid green;
            background: yellow;
            margin: 0 100px;
        }

// An highlighted block
var foo = 'bar';

2. 绝对定位

父元素： position: relative; 定位参考
left和right 设置绝对定位和宽度，分别定位在左边和右边
center： 设置绝对定位，离左边和右边各100px，实现自适应

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

3. flex 弹性盒

父元素： display: flex; 设置后父元素中的子元素会排列成一行
left和right： 设置宽度
center： 设置flex：1， 自动占据剩余的空间，实现自适应

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

4. grid 网格

父元素： display: grid;
grid-template-columns: 100px 1fr 100px;
或者
grid-template-columns: 100px auto 100px;

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

圣杯布局

.container {
            overflow: hidden;
            padding: 0 100px;  //留出空间放置左右盒子
            border: 3px solid black;
        }
        .left {
            float: left;
            width: 100px;
            margin-left: -100%;     // 左盒子的左边界距离父元素的右边界为  父盒子的内容宽度  效果是直接排列在父盒子内容区的最左边
            position: relative;
            left: -100px;
            border: 3px solid red;
            background-color: greenyellow;
        }
        .right {
            float: left;
            width: 100px;
            margin-left: -100px;   // 右盒子左边界距离父盒子的右边界为-100px   距离正好等于右盒子宽度， 效果为直接排在父元素内容区最右边
            position: relative;
            left: 100px;
            background-color: darkgreen;
        }
        .center {
            float: left;
            width: 100%;
            background-color: darkorange;
        }

双飞翼布局

双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。
核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，
该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。

.container {
            overflow: hidden;
            border: 1px solid black;
        }
        .left {
            float: left;
            width: 100px;
            margin-left: -100%;
            background-color: greenyellow;
        }
        .center {
            float: left;
            width: 100%;
            background-color: darkorange;
        }
        .main{
            margin: 0 100px;
        }
        .right {
            float: left;
            width: 100px;
            margin-left: -100px;
            background-color: darkgreen;
        }

<div class="container">
    <div class="center"><div class="main">中间自适应<br><br>			</div></div>
    <div class="left">111<br><br><br></div>
    <div class="right">222<br><br><br><br></div>
</div>