CSS三列布局

一、两列定宽,一列自适应

1、使用float+margin实现

<div class="wrap">
        <div class="left">左列定宽</div>
        <div class="center">中间定宽</div>
        <div class="right">右列自适应</div>
    </div>

.wrap{
    /* 防止页面缩放，宽度不够，子元素换行 */
    min-width: 200px;
}
.left{
    width: 100px;
    height: 500px;
    float: left;
    background-color: palegreen;
}
.center{
    width: 100px;
    height: 500px;
    float: left;
    background-color: palevioletred;
}
.right{
    height: 500px;
    margin-left: 200px;
    background-color: peru;
}

2、使用float+overflow实现

.right{
    height: 500px;
    /* 开启BFC，无需关注定宽的宽度,自适应*/
    overflow: hidden;
    background-color: peru;
}

3、使用table实现

.wrap{
    width: 100%;
    display: table;
    height: 500px;
    /* 设置相邻单元格的边框间的距离,仅适用于表格*/
    border-spacing: 10px;
    /* 抵消上下边距10px的位置影响 */
    margin: -10px 0;
}
.left{
    width: 100px;
    display: table-cell;
    background-color: palegreen;
}
.center{
    width: 100px;
    display: table-cell;
    background-color: palevioletred;
}
.right{
    display: table-cell;
    background-color: peru;
}

4、使用flex实现

.wrap{
    display: flex;
    height: 300px;
}
.left{
    width: 100px;
    background-color: palegreen;
}
.center{
    width: 100px;
    background-color: palevioletred;
}
.right{
    flex: 1;
    background-color: peru;
}

5、使用Grid实现

.wrap{
    display: grid;
    grid-template-columns: 100px 100px auto;
    height: 300px;
}
.left{
    background-color: palegreen;
}
.center{
    background-color: palevioletred;
}
.right{
    background-color: peru;
}

二、两侧定宽,中间自适应

1、双飞翼布局方法

<div class="header"></div>
    <div class="wrap">
        <div class="center">
            <div class="center_inbox">中间自适应</div>
            <!-- 方便观察center的宽度 -->
            <hr>
        </div>
        <div class="left">左列定宽</div>
        <div class="right">右列定宽</div>
    </div>
    <div class="footer"></div>

.header{
    height: 60px;
    background-color: #cccccc;
}
.left{
    float: left;
    width: 100px;
    height: 500px;
    /*调整.left的位置,值等于自身宽度*/
    margin-left: -100%;
    background-color: palegreen;
    /* 设置不透明度 */
    opacity: 0.5;

}
.right{
    float: left;
    width: 200px;
    height: 500px;
    /*使right到指定的位置,值等于自身宽度*/
    margin-left: -200px;
    background-color: peru;
    opacity: 0.5;
} 
.center{
    height: 500px;
    float: left;
    width: 100%;
    background-color: palevioletred;
}
.center_inbox{
    height: 480px;
    border: 1px solid #000;
    /* 左右边界等于左右盒子的宽度,多出来的为盒子间隔 */
    margin: 0 220px 0 120px;
} 
.footer{
    background-color: #cccccc;
    clear: both;
    height: 60px;
}

2、圣杯布局方法

.header{
    height: 60px;
    background-color: #cccccc;
}
.wrap{
    box-sizing: border-box;
    height: 500px;
    padding: 0 215px 0 115px;
}
.left{
    width: 100px;
    height: 500px;
    background-color: palegreen;
    position: relative;
    left: -115px;
    /* 设置浮动，右列上去 */
    float: left;
    /*先让.center浮动，使.left上去一行*/
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 500px;
    background-color: rgb(205, 143, 63);
    position: relative;
    left: 215px;
    /* 使右列靠近左列 */
    margin-left: -200px;
    /* 使右列能够排在最右侧 */
    float: left;
} 
.center{
    /* 让左右两列能够上移 */
    float: left;
    height: 500px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #000000;
    background-color: rgb(216, 112, 193); 
}
.footer{
    background-color: #cccccc;
    height: 60px;
}

3、使用Grid实现

<div class="wrap">
        <div class="header"></div>
        <div class="center">
            <div class="center_inbox">中间自适应</div>
            <!-- 方便观察center的宽度 -->
            <hr>
        </div>
        <div class="left">左列定宽</div>
        <div class="right">右列定宽</div>
        <div class="footer"></div>
    </div>

.wrap{
    height: 500px;
    display: grid;
    /* 设置三列 */
    grid-template-columns: 100px auto 200px;
    /* 设置三行 */
    grid-template-rows: 60px auto 60px;
    /* 设置网格区域分布 */
    grid-template-areas: 
    "header header header" "leftside main rightside" "footer footer footer";
}
.header{
    /* 指定在哪个网格区域 */
    grid-area: header;
    background-color: #cccccc;
}
.left{
    grid-area: leftside;
    background-color: palegreen;
}
.center{
    grid-area: main;
    /* 设置间隔 */
    margin: 0 15px;
    /* 设置边框样式 */
    border: 1px solid #000000;
    background-color: rgb(216, 112, 193); 
}
.right{
    grid-area: rightside;
    background-color: rgb(205, 143, 63);
} 
.footer{
    /* 三个footer区域都填充.footer */
    grid-area: footer;
    background-color: #cccccc;
}

4、使用table实现
margin失效，采用border-spacing表格两边的间隔无法消除

<div class="wrap">
        <div class="left">左列定宽</div>
        <div class="center">中间自适应</div>
        <div class="right">右列定宽</div>
    </div>

.wrap{
    display: table;
    height: 500px;
    width: 100%;
}
.left{
    display: table-cell;
    width: 100px;
    background-color: palegreen;
}
.center{
    display: table-cell;
    background-color: rgb(216, 112, 193); 
}
.right{
    display: table-cell;
    width: 200px;
    background-color: rgb(205, 143, 63);
} 

5、使用flex实现

.wrap{
    display: flex;
    height: 500px;
}
.left{
    width: 100px;
    background-color: palegreen;
}
.center{
    flex: 1;
    background-color: rgb(216, 112, 193); 
}
.right{
    width: 200px;
    background-color: rgb(205, 143, 63);
} 

6、使用position实现

.wrap{
    position: relative;
}
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: palegreen;
}
.center{
    margin-left: 110px;
    margin-right: 210px;
    height: 500px;
    background-color: rgb(216, 112, 193); 
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 500px;
    background-color: rgb(205, 143, 63);
}