实现三列布局的五种方式

五种方式的结果都如下图：

 

 方法一 ：

        利用position ,左右盒子分别设置绝对定位，给固定宽高，中间宽度自适应，设置高度，margin左右盒子的宽度

<div class="father">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.left,
.right {
           position: absolute;
            height: 300px;
            width: 200px;
            top: 0;
        }

        .left {
            left: 0;
            background-color: bisque;
        }

        .right {
            right: 0;
            background-color: blueviolet;
        }

        .center {
            margin: 0 200px;
            height: 300px;
            background-color: aqua;
        } 

方法二：

        利用浮动，左右设置固定宽高，并设置左右浮动，中间一栏设置高度并margin左右栏的宽度 

注意：中间一栏必须放在必须放在最后不然右边div会掉下来

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

        .left,
        .right {
            height: 300px;
            width: 200px;
        }
        .left{
            float: left;
            background-color: bisque;
        }
        .right{
            float: right;
            background-color: blueviolet;
        }
        .center {
            margin: 0 200px;
            height: 300px;
            background-color: aqua;
        }  

方法三：

        利用flex，左右栏设置固定宽高，中间设为flex:1

<div class="father">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

        .father{
            display: flex;
        }
        .left,
        .right {
            height: 300px;
            width: 200px;
        }
        .left{
            background-color: bisque;
        }
        .right{
            background-color: blueviolet;
        }
        .center {
            flex: 1;
            height: 300px;
            background-color: aqua;
        }  

方法四：

        圣杯布局，利用浮动和负边距实现

将三列都放在同一个父元素里，父元素设置左右的padding,然后中间的盒子放在最前面，

三个盒子都设置左浮动，中间盒子宽度100%，左右盒子固定宽高，然后会把左右盒子挤下去,

通过设置负值回到上一行,左盒子负值100%，右盒子负值自身宽度

再利用相对定位，定位到两边，左盒子设置左边距-100%，右盒子设置右边距-自身宽度

最后父盒子设置清除浮动 

注：圣杯布局中间盒子宽度不能小于左盒子宽度，不然左盒子上不去 

<div class="father">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

        .left,
        .right {
            position: relative;
            float: left;
            height: 300px;
            width: 200px;
        }

        .father{
            overflow: hidden;
            padding: 0 200px;
        }

        .left {
            left: -200px;
            margin-left: -100%;
            background-color: bisque;
        }

        .right {
            right: -200px;
            margin-left: -200px;
            background-color: blueviolet;
        }

        .center {
            float: left;
            width: 100%;
            height: 300px;
            background-color: aqua;
        }

方法五：

双飞翼布局，同圣杯布局，利用浮动和负边距实现，不同的是左右盒子位置的保留不是通过父盒子的padding，而是中间盒子内部元素的margin，且此布局无需用到相对定位

<div class="father">
    <div class="center">
        <div class="incenter"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

        .left,
        .right {
            float: left;
            height: 300px;
            width: 200px;
        }

        .father {
            overflow: hidden;
        }

        .left {
            margin-left: -100%;
            background-color: bisque;
        }

        .right {
            margin-left: -200px;
            background-color: blueviolet;
        }

        .center {
            float: left;
            width: 100%;
            height: 300px;
            background-color: aqua;

        }

        .incenter {
            margin: 0 200px;
        }