哦，圣杯布局

先把基本布局写一下：

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

哦，为了方便观察，还有一些基本样式：

  .main {background-color: orange;}
  .left {background-color: #9e9e9e;}
  .right {background-color: #a6e22a;}

一些想法：提到圣杯布局，我会想到收拾行李的时候，行李箱左侧放一个盒子，右侧放一双鞋子，那么此时，中间部分可以装东西的容量就有我的行李箱大小来决定了。好，无论如何我都得先给盒子和鞋子留出空间，那我测量一下盒子和鞋子的宽度，并把空间分给它们：

  .main {width:100%;}
  .left {width:200px;}
  .right {width:150px;}
  .container {
    padding-left:200px;
    padding-right:150px;
  }

可是此时我的盒子和鞋子还是没有摆好，它们被其他衣物压在了下面，我这时候试了一下，得出了一个解决办法，我先把盒子拿到衣物上，和衣服对齐，然后我再把它移到左边去,接着中间的衣服往左贴。

  .left {
    margin-left:-100%; /*使得left上移且覆盖住main*/
    float: left; /*靠左浮动*/
    position: relative; /*设置相对定位*/
    left: -200px; /*以自己左上原点为起始位置，向左移200px*/
  }
  .main {float:left;}

到这里的时候，鞋子还在下面，我把它靠右放好并且挪上来

  .right {
    float: right;
    margin-right: -120px; 
 }

到这里，我自己脑子里这个圣杯布局实现。我的行李也收拾好了。有不完美的地方，待我继续提高收拾行李的能力。