几种常见的CSS布局（三栏布局技巧）

这篇文章是专门用来列一下常见的几种CSS布局，来实现三栏布局的效果。

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发中是很常见的，我们一定要好好琢磨一下。

淘宝网这种就属于典型的三栏布局：

1、流体布局

.left{
    float: left;
    height: 200px;
    width: 100px;
    background-color: red;
}
.right{
    float: right;
    width: 200px;
    height: 200px;
    background-color: blue;
}
.main{
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background-color: green;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

左右的模块分别向各自的方向浮动，设置中间模块的margin值来使得中间模块自适应。

2、双飞翼布局

.content{
    float: left;
    width: 100%;
}
.main{
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background-color: green;
}
.main::after{
    content: '';
    display: block;
    font-size: 0;
    height: 0;
    zoom: 1;
    clear: both;
}
.left{
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
}
.right{
    float: right;
    width: 200px;
    height: 200px;
    margin-left: -200px;
    background-color: blue;
}

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

双飞翼布局利用的是负margin技术，负margin的应用场景还是很多的，感兴趣的可以搜一下相关内容专门钻研一下。

3、圣杯布局

.container{
    margin-left: 120px;
    margin-right: 220px;
}
.main{
    float: left;
    width: 100%;
    height: 300px;
    background-color: green;
}
.left{
    position: relative;
    left: -120px;
    float: left;
    height: 300px;
    width: 100px;
    margin-left: -100%;
    background-color: red;
}
.right{
    position: relative;
    right: -220px;
    float: right;
    width: 200px;
    height: 300px;
    margin-left: -200px;
    background-color: blue;
}

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="left"></div>
</div>