三栏布局

页面布局

实现一个高度固定的三栏布局

有五种方式：绝对定位实现、float实现、flex实现、table和table-cell实现、grid实现。

<section class="content">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">class</div>
</section>

1. 绝对定位实现：

   <style>
        .content{
            height: 500px;
            position: relative;
        }
        .content div{
            height: 100%;
        }
        .left,.right{
            width: 300px;
            background-color: chocolate;
        }
        .left{
            position: absolute;
            top: 0;
            left: 0;
        }
        .right{
            position: absolute;
            top: 0;
            right: 0;
        }
        .middle{
            position: absolute;
            top: 0;
            /*关键在左右宽度*/
            left: 300px;
            right: 300px;
            background-color: cornflowerblue;
        }
    </style>

2. float实现：

    <style>
        .content{
            height: 500px;
        }
        .content div{
            height: 100%;
        }
        .left,.right{
            width: 300px;
            background-color: chocolate;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .middle{
            background-color: cornflowerblue;
        }
    </style>
    <section class="content">
	    <div class="left">left</div>
	    <div class="right">class</div>
	    <div class="middle">middle放最后</div>
	</section>

3. flex实现：

    <style>
        .content{
            height: 500px;
            display: flex;
        }
        .content div{
            height: 100%;
        }
        .left,.right{
            width: 300px;
            background-color: chocolate;
        }
        .middle{
            flex: 1;	/*flex:1;自适应*/
            background-color: cornflowerblue;
        }
    </style>

4. table-cell实现：

   <style>
        .content{
            width: 100%;
            /*父容器宽度100% 没设置宽度的table-cell自动填充*/
            height: 500px;
            display: table;
        }
        .content div{
            height: 100%;
            display: table-cell;
        }
        .left,.right{
            width: 300px;
            background-color: chocolate;
        }
        .middle{
            background-color: cornflowerblue;
        }
    </style>

5. grid实现：

    <style>
        .content{
            width: 100%;
            height: 500px;
            display: grid;
            grid-template-columns: 300px auto 300px;
        }
        .content div{
            /*height: 100%;*/
        }
        .left,.right{
            background-color: chocolate;
        }
        .middle{
            background-color: cornflowerblue;
        }
    </style>

优缺点总结：