CSS中的圣杯布局与双飞翼布局

圣杯布局和双飞翼布局也是实现二&三列布局的有效方式，我将在本文中记录它们的原理和实现。

圣杯布局

原理：圣杯布局在所有列的最外层增加了一个含有padding的wrapper，通过定位，负边距将两个侧边栏移动至wrapper的padding处，实现三列布局。

实现步骤：

1. 进行wrapper的padding设置，使其大于等于对应边栏的宽度，用来容纳边栏。


2. 对两个侧边栏设置左浮动，使其紧贴主栏下面的左侧。（在HTML中先写浮动的主栏。）


3. 对边栏设置负margin（左栏-100%，使其恰好到达wrapper内容区的左边界；右栏-（右栏width），使其恰好到达wrapper内容区的右边界。


4. 对边栏设置相对定位使其由wrapper内容区进入padding。

<div id="bd">    <div class="main"></div>    <div class="left"></div>    <div class="right"></div></div>

.main {    float: left;    width: 100%;    height: 400px;    background-color: darkgray;}.left {    float: left;    width: 190px;    margin-left: -100%;    position: relative;    left: -190px;    height: 400px;    background-color: aqua;}.right {    float: left;    width: 230px;    margin-left: -230px;    position: relative;    right: -230px;    height: 400px;    background-color: blue;}#bd {    padding: 0 230px 0 190px;    background-color: green;}

效果图：

双飞翼布局

双飞翼布局不将容纳边栏的留白设置在一个包含所有栏的wrapper中，而是在主栏上设置margin用来容纳侧栏，这样就省略了将侧栏拉到主栏那一行后进行的relative定位（因为双飞翼布局留白就在父元素的内容区，而圣杯布局的留白在父元素内容区之外）。

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

.main {    height: 400px;    margin: 0 230px 0 190px;    background-color: darkgray;}.left {    float: left;    width: 190px;    margin-left: -100%;    height: 400px;    background-color: aqua;}.right {    float: left;    width: 230px;    margin-left: -230px;    height: 400px;    background-color: blue;}.bd {    float: left;    width: 100%;    height: 400px;    background-color: cadetblue;}

效果图：

注意：

为什么不将margin设置在bd中？

注意width大小是不包含margin的，如果将margin设置在bd中，width就不好确定了（如果width=100%；该元素实际大小为width+margin已经超出屏幕），因此让bd的width=100%，在其内部的main中设置margin来容纳侧栏。

为什么要将bd设置为float？

在圣杯布局中也将主栏设置为了float，当不将其设置为float时，不能通过negative margin将下面的浮动元素提升到上一行，而只是将下面的浮动元素移动到同一行超出屏幕范围的位置。在双飞翼布局中将bd设置为float的道理和它是相同的。