三栏布局的六种方式

题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。
要求：允许增加额外的DOM节点，但不能修改现有节点顺序。

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

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

首先，三列布局，中间宽度自适应，两边定宽；

其次，中间栏要在浏览器中优先展示渲染；

最后允许任意列的高度最高；

方法一：圣杯布局

1、设置基本的样式

/*圣杯布局法*/
.left, .main, .right {
  min-height: 130px;
}
.left {
  background: green;
  width: 200px;
}
.main {
  background-color: blue;
}
.right {
  background-color: red;
  width: 300px;
}

保持高度一致时，给左右中都加上相同的高度

2.圣杯布局是一种相对布局，首先设置父元素container的位置：

.container {
  padding: 0 300px 0 200px;
}

实现效果是左右分别空出200px和300px区域，效果如图：

3.将主体部分的三个子元素都设置左浮动

.left, .main, .right {
  min-height: 130px;
  float: left;
}

4.设置main宽度为width:100%,让其单独占满一行

.main {
  background-color: blue;
  width: 100%;
}

5.设置left和right 负的外边距

　　我们的目标是让left、main、right依次并排，但是上图中left和right都是位于下一行，这里的技巧就是使用负的margin-left:

.left {
  margin-left: -100%;
  background-color: green;
  width: 200px;
}
.right {
  margin-left: -300px;
  background-color: red;
  width: 300px;
}

负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行