圣杯布局和双飞翼布局

圣杯布局和双飞翼布局功能相同，都是用来实现左右两边定宽，中间自适应宽度的三栏布局。两种布局的DOM结构都遵循中间部分先行的原则，以便优先渲染。具体实现方式上略有区别。

一、圣杯布局

1、DOM结构

<header>Head</header>
<div class="container">
    <div class="middle">Middle<br>Content</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<footer>Footer</footer>

2、css样式

.container {
    overflow: hidden;
    padding: 0 200px 0 250px;
} 
.middle, .left, .right {
    float: left;
}
.middle {
    width: 100%;
    background: #ff7f50;
}
.left {
    position: relative;
    left: -250px;
    margin-left: -100%;
    width: 250px;
    background: #6495ed;
}
.right {
    position: relative;
    right: -200px;
    margin-left: -200px;
    width: 200px;
    background: #add8e6;
}

3、效果图

二、双飞翼布局

 1、DOM结构

<header>Head</header>
<div class="container">
    <div class="middle"><div class="center">Middle<br>Content</div></div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<footer>Footer</footer>

2、css样式

.container {
    overflow: hidden;
} 
.middle, .left, .right {
     float: left;
}
.middle {
    width: 100%;
}
.middle .center {
    margin: 0 200px 0 250px;
    background: #ff7f50;
}
.left {
    margin-left: -100%;
    width: 250px;
    background: #6495ed;
}
.right {
    margin-left: -200px;
    width: 200px;
    background: #add8e6;
}

3、效果图

　　

三、三栏等高

1、css样式

    在上面的代码基础上增加样式：

.container, .middle, .right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

2、效果图

四、使用Flex布局实现三栏布局 

 1、DOM结构

<header>Head</header>
<div class="container">
    <div class="middle">Middle<br>Content</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<footer>Footer</footer>

 2、css样式

.container {
    display: flex;
} 
.middle {
    flex: 1;
    background: #ff7f50;
}
.left {
    order: -1;
    flex: 0 0 250px;
    background: #6495ed;
}
.right {
    flex: 0 0 200px;
    background: #add8e6;
}

3、效果图