圣杯布局与双飞翼布局

一，圣杯布局

实现左右栏目宽度固定，中间栏目宽度自适应

基本的html结构（中间栏在dom结构的最前面）

<div class="container">
    <div class="center column" style="background:#ccc">
        我是最中间的主题部分
    </div>
    <div class="left column" style="background:pink;width:200px;">
        <p>我是左边的部分</p>
    </div>
    <div class="right column" style="background:blue;width:300px;">
        <p>我是右边的部分</p>
    </div>
 </div>复制代码

第一步：最外层容器

.container{
    padding-left:200px;
    padding-right:300px;
}复制代码

第二步：三栏设统一的样式，中间栏宽度为100%;

.column{
    position: relative;
    float: left;
    min-height: 200px;
}
.center{
    width:100%;
}复制代码

浏览器预览：

第三步：设置.left

.left{
    margin-left:-100%;
}复制代码

浏览器预览：

紧接着继续设置

.left{
    margin-left:100%;
    right:200px;    //对于position:relative；元素，其实在为其右边填充了200px;即元素整体向左便宜200px
}复制代码

浏览器预览：

第四步：设置.right

.right{
    margin-right:-300px;
}复制代码

浏览器预览:

注意事项，给container加一个min-width:200px;

二，双飞翼布局

两者实现思路的差异：双飞翼布局多一个div来包裹主体内容复制代码

html代码：

<div class="container clearfix">
       <div class="center column" style="background:#ccc">
            <div class="content">
                我是最中间的主题部分
            </div>
       </div>
       <div class="left column" style="background:pink;width:200px;">
           <p>我是左边的部分</p>
       </div>
       <div class="right column" style="background:blue;width:300px;">
            <p>我是右边的部分</p>
       </div>
</div>复制代码

第一步：为三栏设置统一的样式

.column{
    float:left;
    min-heigth:200px;
}
.center{
    width:100%;
}复制代码

浏览器预览：

第二步：相同的道理设置.left和.right

.left{
    margin-left:-100%;
}
.right{
    margin-left:-300px;
}复制代码

浏览器预览结果：

第三步：可以看到，中间的内容被挡住了，所以我们可以设置.content

.content{
    margin-left:200px;
    margin-right: 300px;
    min-width:100px;
}复制代码

浏览器预览：

三，flex布局

让我们来看看flex布局的出色表现吧
html结构：

<div class="container clearfix">
       <div class="left column" style="background:pink;width:200px;">
           <p>我是左边的部分</p>
       </div>
       <div class="center column" style="background:#ccc">
            <p>我是中间的主体结构</p>
        </div>
       <div class="right column" style="background:blue;width:300px;">
            <p>我是右边的部分</p>
       </div>
 </div>复制代码

只需要设置一步：

.container{
    min-width: 200px;
    display: flex;
}
.center{
    flex:1;
}复制代码

浏览器预览结果：

天呐，太出色了有没有！