主题要求：针对以下DOM结构，制作CSS，实现三栏水平布局，其中left、right分别位于左右，left宽度为200px，right宽度为300px，main位于中间，left
要求：可以添加DOM节点，但不能更改现有节点的顺序。
div class='container '
div class='main'main/div
div class='left'left/div
div class='right'right/div
/div
圣杯的配置和双飞翼的配置是以在3列左右栏中固定中间栏框来适应的网页配置为对象的。 (想象圣杯是主体。 有两只耳朵。 鸟是身体上长了翅膀的东西。 ()、圣杯的配置是http://www.Sina.com/2006年提出的配置模式概念，国内流传最早为淘宝UED的工程师) )内向的发带 Cornell。 在中国也被称为双飞翼的配置，但其配置要求几点
3列布局、中间宽度自适应、两侧定宽；
中央栏在浏览器中优先显示渲染；
允许任意列高度最高；
可见我们对主题的要求与圣杯布局和双飞翼布局的要求相同。
看看具体的实现方法吧。
http://www.Sina.com/1.3358 www.Sina.com /
/*3.圣杯配置法*/.left、 main、 right { min-height: 130px； }.left { background: green； width: 200px； }.main { background-color : blue； }.right { background-color : red； width: 300px； }为了保持高度一致，在左主灯光中添加最小高度：130 px。
2 .圣杯布局为玉伯，首先设置父元素container的位置：
. container { padding :0300 px 0200 px； }为了实现效果，左右分别空出200px和300px的区域。 效果如图所示。
3 .主体部分的三个子要素全部为方法一：圣杯布局
. left、 main、 right { min-height: 130px； 浮点：左； }发生了以下情况。 我该怎么办？ 请不要着急，慢慢来。
将main的宽度设置为基本样式，使其适合一行一列
. main {背景色： blue； width: 100%； }
left和right 相对布局
我们的目标是按顺序排列left、main和right，但在上图中left和right位于以下行： 这里的技巧是使用负margin-left:
. left { margin-left: -100%； 背景色： green； width: 200px； }.right { margin-left: -300px； 背景色： red； width: 300px； }如果指定负边距-左对齐，元素将沿着文档的流程向左移动，如果负值较大，则移到上一行。 关于负margin的应用也是博大精深的，这里肯定不能详细介绍。
如果将左旁注部分的边距左旁注设置为-100%，则左旁注将向左移动整行的宽度。 left的左侧是父元素的边框，因此left继续跳到上一行的左侧，移动到上一行的开头，并覆盖主元素部分。 仔细查看下图，您会发现看不到main中的字符“main”。left向上移动时，right位于前一行的开头。 此时，如果将right部分的margin-left设置为负宽度，则right将向左移动到上一行的末尾。
6 .其次，把左和右分别移动到这两个空白就可以了。 可以使用左浮动移动left和right部分。
. left、 main、 right { position: relative； min-height: 130px； 浮点：左； }.left { left: -200px； margin-left: -100%； 背景：绿色； width: 200px； }.right { right: -300px； 玛格琳- left :-300 px； 背景色： red； width: 300px； }
至此，我们完成了三排中间
自适应的布局，也就是传说中的圣杯布局。完整的代码如下： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>实现三栏水平布局之圣杯布局</title> <style type="text/css"> .container { padding: 0 300px 0 200px; } .left, .main, .right { position: relative; min-height: 130px; float: left; } .left { left: -200px; margin-left: -100%; background: green; width: 200px; } .right { right: -300px; margin-left: -300px; background-color: red; width: 300px; } .main { background-color: blue; width: 100%; } </style></head><body><div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div></body></html> 方法二：双飞翼布局 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。
他的HTML结构发生了变化：
直接贴出代码，读者可以自行参透他们的异同：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>实现三栏水平布局之双飞翼布局</title> <style type="text/css"> .left, .main, .right { float: left; min-height: 130px; text-align: center; } .left { margin-left: -100%; background: green; width: 200px; } .right { margin-left: -300px; background-color: red; width: 300px; } .main { background-color: blue; width: 100%; } .content{ margin: 0 300px 0 200px; } </style></head><body><div class="container"> <div class="main"> <div class="content">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div></body></html>双飞翼布局比圣杯布局多使用了1个div，少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；而双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。
想知道更多关于圣杯布局和双飞翼布局，请参考：
圣杯布局和双飞翼布局的作用和区别
CSS布局 – 圣杯布局 & 双飞翼布局
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局，所以Flex 布局将成为未来布局的首选方案。
对于Flex布局的一些具体语法实现，可参见twdhf大神的Flex 布局教程：语法篇；网友 JailBreak 为Flex布局制作了 Demo，可以参考。
想了解Flex布局的具体实例可参见twdhf大神的Flex 布局教程：实例篇；想直接查看Flex布局实例，你可以到直接到codepen查看Demo。
接下来讲一下此实例的具体实现：
1.首先将container块设置为一个Flex容器
那么container下属的main、left和right这三个子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
2.对这三个项目做初始设置
项目根据内容进行弹性布局：
3.通过order属性设置排列顺序
可以看出三个项目的排序方式不一样了，main排在了第一个，要让main在中间，left在左边，可以通过Flex容器下的项目的属性“order”属性来设置：
.left{ order: -1; background-color: green;}对于order属性：定义项目的排列顺序，越小越靠前，默认为0。
４.通过项目属性flex-grow设置main的放大比例，将空余的空间用main来填充，使三个项目不满一整行；默认为0，也就是对剩余空间不做处理。
.main{ flex-grow:1; background-color: blue;}5.通过项目属性flex-basis 设置left和right的固定宽度
.left{ order: -1; flex-basis: 200px; background-color: green; } .right{ flex-basis: 300px; background-color: red; }这样就实现了我们的目标，是不是很简单？这就是flex布局的魅力。。。
6.最后，完整的代码如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>实现三栏水平布局之Flex布局</title> <style type="text/css"> .container{ display: flex; min-height: 130px; } .main{ flex-grow: 1; background-color: blue; } .left{ order: -1; flex-basis: 200px; background-color: green; } .right{ flex-basis: 300px; background-color: red; } </style></head><body><div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div></body></html> 方法四：绝对定位布局 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
言归正传：
绝对定位，就相当于万金油一样的存在，不论什么样的布局，使用绝对定位都能实现，所以对于具体的实现过程就不赘述，下面直接上代码，不懂的call我：
实现结果当然是一样的啦！
（完）