三栏布局方法

Posted 2020-09-07

1.浮动法，左列左浮动，右列右浮动，插入主体。中间内容#main必须要在最后加入，#main占一行会影响后面的浮动元素

    html,body{
        margin: 0;
        height: 100%;
    }
    #left{
        width: 120px;
        float: left;
        height: 100%;
        background-color: grey;
    }
    #right{
        width: 200px;
        float:right;
        height: 100%;
        background-color: grey;
    }
    #main{
        background-color: skyblue;
        margin: 0 220px 0 140px;
        height:100%;
    }

<div id="left"></div>
<div id="right"></div>
<div id="main">主体</div>

2.margin负值法，每个盒子都向一边浮动，通过负margin把盒子拉到左侧，先放中间的盒子

    body,html{
        height: 100%;
        margin: 0;
    }
    #main{
        float: left;
        width: 100%;
        height: 100%;
    }
    #content{
        margin: 0 220px 0 140px;
        background-color: skyblue;
        height: 100%;
    }
    #left{
        float: left;
        width: 120px;
        height: 100%;
        margin-left: -100%;
        background-color: grey;
    }
    #right{
        float: left;
        width: 200px;
        height: 100%;
        margin-left: -200px;
        background-color: grey;
    }

<div id="main">
    <div id="content"></div>//留空位给左右两列
</div>
<div id="left"></div>
<div id="right"></div>

3.绝对定位，左右两列绝对定位，中间用margin撑开距离。最容易理解

4.flex布局，最简单

    body,html{
        height: 100%;
        margin: 0;
    }
    #box{
        height: 100%;
        width: 100%;
        display: flex;
    }
    #left{
        width: 120px;
        background-color: grey;
        height: 100%;
    }
    #main{
        flex:1;
        background-color: skyblue;
        height: 100%;
        margin:0 20px;
    }
    #right{
        width: 200px;
        background-color: grey;
        height: 100%;
    }