先把基本布局寫一下：
<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;}
一些想法：提到圣杯布局，我會想到收拾行李的時候争涌，行李箱左側(cè)放一個盒子粉楚，右側(cè)放一雙鞋子，那么此時，中間部分可以裝東西的容量就有我的行李箱大小來決定了模软。好伟骨，無論如何我都得先給盒子和鞋子留出空間，那我測量一下盒子和鞋子的寬度燃异，并把空間分給它們：
.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; /*設(shè)置相對定位*/
left: -200px; /*以自己左上原點為起始位置，向左移200px*/
}
.main {float:left;}
到這里的時候忘瓦，鞋子還在下面搁廓，我把它靠右放好并且挪上來
.right {
float: right;
margin-right: -120px;
}
到這里，我自己腦子里這個圣杯布局實現(xiàn)耕皮。我的行李也收拾好了境蜕。有不完美的地方，待我繼續(xù)提高收拾行李的能力明场。
