圣杯布局

圣杯（grail）布局实现的是三栏布局，两边的盒子宽度固定，中间盒子自适应的布局。中间栏要在放在文档流前面以优先渲染。

(1)HTML结构

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

写结构的时候要注意，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染嘛~并且设置其自适应，也就是width:100%。

(2)CSS样式

/*全部div统一高500px*/
.main,.left,.right{
  height:300px;
}
.container{
  overflow: hidden;
  padding:0px 210px 0px 200px;
}

.main{
  width:100%;
  float: left;
  background-color: #eee;

}

.left{
  float:left;
  width:200px;
  background-color: #0e0;
  margin-left:-100%;
  position: relative;
  left:-200px;
}

.right{
  float:left;
  width:210px;
  background-color: #F00;
  margin-left:-210px;
  position: relative;
  right:-210px;
}

结果：

res.png

(3)步骤总结

1.给容器添加overflow:hidden,给三栏添加左浮动和高度。

1.png

2.利用负边距布局让左右盒子上移，左盒子margin-left:-100%;,右盒子margin-left：-210px;

2.png
但是，中间盒子是自适应的宽度，所以中间盒子里的内容会被左右盒子给压住一部分。所以main的文本‘main其实是被遮住了’

3.让main自适应的盒子正常显示
3.1 给父级元素设置左右内边距的值，把父级的三个子盒子往中间挤

3.png
3.2 给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。左盒子position: relative; left: -200px; 右盒子position: relative;right: -210px;
4.png

现在，圣杯布局终于搞定了.