早上到办公室，在某个网站上看到有人问圣杯布局是什么东西，想起来最近一直在写php，没写布局相关前端代码了，就打算花上几分钟的时间写写，写的时候才发现，我本来对这些东西就没有特别深刻的领悟，现在在写突然在十分钟之内居然没有写出来，感觉挺难过。
练练手吧。
圣杯布局是什么样的呢：三列布局，左列和右列都是固定宽度，中间自适应。。
整体思路也就是：父元素main肯定是要有的（当然有些人以body为父级元素也没有问题嘛）----》里边先设置中间的middle部分，设置为其父元素宽高的100%-----》然后再放left和right部分，其width都是固定值，这两个部分因为是在middle之后，为了让他们在一排显示可以设float为left-----》此时的left和right跟在middle之后，为了能是他们在正确的位置，就要用到margin的负值属性，个人觉得负值用好了是个很漂亮的属性：left的margin-left属性设成-100%，此时就会向左偏移了一个middle的宽度，当然这就占据了middle的部分宽度-----》right与left同样的处理方式，但是因为right是紧挨main的右侧，所以向左飘一个它本身的宽度就可以，也就是margin-left为 负的right的宽度---》此时就差不多大功告成，但是还有middle里的content占据100%宽度但是其左右的margin是要设定成left和right的宽度滴。。。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <style type="text/css"> 5 .main{ 6 width: 80%; 7 height: 300px; 8 } 9 .left,.right,.middle{ 10 float: left; 11 height: 100%; 12 } 13 .middle{ 14 width: 100%; 15 background-color: gold; 16 } 17 .left{ 18 width: 150px; 19 margin-left: -100%; 20 background-color: yellow; 21 } 22 .right{ 23 width: 200px; 24 margin-left: -200px; 25 background-color: #ee4311; 26 } 27 .content{ 28 margin:0 200px 0 150px; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="main"> 34 35 <div class="middle"> 36 <div class="content"> 37 middle-content 38 </div> 39 </div> 40 <div class="left">left</div> 41 42 <div class="right">right</div> 43 </div> 44 </body> 45 </html>
当然这只是很小很小的一次试水，还有类似的双飞翼、两列响应式等等的布局，都是很有意思的。
原文：http://www.cnblogs.com/jellyhui/p/4917846.html