css 实现三栏布局（圣杯布局）的5种方法

效果图：

 

1、浮动：设置float: left;，配合负margin来实现

　　　　.left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }

        .right {
            float: right;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }

        .main {
            background-color: green;
            height: 200px;
            margin-left: 120px;
            margin-right: 120px;
        }

        .container {
            border: 1px solid black;
        }

　　<div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main">float布局、float布局、</div>
    </div>

　　2、圣杯布局:两端宽度固定，中间自适应

 　　　　.container1 {
            padding-left: 100px;
            padding-right: 100px;
        }

        .main1 {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }

        .left1 {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }

        .right1 {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }
　　<div class="container1">
        <div class="main1">圣杯布局、圣杯布局、圣杯布局、圣杯布局、圣杯布局、圣杯布局</div>
        <div class="left1"></div>
        <div class="right1"></div>
    </div>

　　3、双飞翼布局

        .main2 {
            float: left;
            width: 100%;
        }

        .content2 {
            height: 200px;
            margin-left: 110px;
            margin-right: 110px;
            background-color: green;
        }

        .left2 {
            float: left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            background-color: red;
        }

        .right2 {
            width: 100px;
            height: 200px;
            float: left;
            margin-left: -100px;
            background-color: blue;
        }

        /* 清除浮动 */
        .container2::after {
            display: block;
            content: '';
            font-size: 0;
            height: 0;
            clear: both;
            zoom: 1;
        }    

　　<div class="container2">
        <div class="main2">
            <div class="content2">双飞翼布局、双飞翼布局、双飞翼布局、双飞翼布局、双飞翼布局、双飞翼布局</div>
        </div>
        <div class="left2"></div>
        <div class="right2"></div>
    </div>

　　4、flex布局

        .container3 {
            display: flex;
            height: 200px;
        }

        .left3 {
            flex: 0 100px;
            background-color: red;
        }

        .main3 {
            flex: 1;
            background-color: blue;
        }

        .right3 {
            flex: 0 100px;
            background-color: green;
        }

    <div class="container3">
        <div class="left3"></div>
        <div class="main3">flex布局</div>
        <div class="right3"></div>
    </div>

　　5、绝对定位

           .container4 {
            height: 200px;
        }

        .container4 div {
            height: 200px;
        }

        .left4 {
            position: absolute;
            left: 0px;
            width: 100px;
            background-color: red;
        }

        .main4 {
            position: absolute;
            left: 100px;
            right: 100px;
            background-color: yellow;
        }

        .right4 {
            position: absolute;
            right: 0px;
            width: 100px;
            background-color: green;
        }

   <div class="container4">
        <div class="left4"></div>
        <div class="main4">绝对定位、绝对定位、绝对定位、绝对定位、绝对定位 </div>
        <div class="right4"></div>
    </div>