CSS圣杯布局和双飞翼布局

一、圣杯布局

• 圣杯布局简介：

1. 圣杯布局将页面分为 左 中 右 三部分，中间部分的宽度可以随着浏览器宽度的变化而变化，左右两边部分定宽，不会变化。

2. 圣杯布局实现起来很简单，主要是用到了 float、position、margin-left 等属性。

• 圣杯布局HTML代码：

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

• 圣杯布局CSS代码：

#content{
    background-color: #fff;
    height: 60px;
    padding: 0 190px 0 150px;
}
.left{
    width: 150px;
    height: 100%;
    background-color: red;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -150px;
}
.middle{
    width: 100%;
    height: 100%;
    background-color: green;
    float: left;
}
.right{
    width: 190px;
    height: 100%;
    background-color: yellow;
    float: left;
    margin-left: -190px;
    position: relative;
    right: -190px;
}

一、双飞翼布局

• 双飞翼布局简介：

1. 双飞翼布局和圣杯布局很相似，但是在实现上有略微的差别。圣杯布局采用父元素的padding设置中间元素不被遮挡；双飞翼布局采用子元素的margin设置中间元素不被遮挡。

2. 双飞翼布局的特点：中间栏中的内容可以有点渲染出来。

• 双飞翼布局HTML代码：

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

• 双飞翼布局CSS代码：

.content{
    width: 100%;
    height: 56px;
    background-color: #333333;
}
.middle{
    width: 100%;
    height: 100%;
    float: left;
    background-color: #333;
}
.left{
    width: 200px;
    height: 100%;
    float: left;
    background-color: yellow;
    margin-left: -100%;
}
.right{
    width: 150px;
    height: 100%;
    float: left;
    background-color: red;
    margin-left: -150px;
}
.middle .middle-content{
    /*width: 100%;        注意这里不要设置width: 100%,否则右边会溢出，排版混乱*/
    height: 100%;
    background-color: green;
    margin: 0 150px 0 200px;
}