CSS圣杯布局

        本文与之前《css双飞翼布局》一文有些相似，在HTML结构上他们可以说是相同的。样式主要表现为浮动+负边距+定位。

       在《css双飞翼布局》中，为了排开左右两边遮挡main元素的区域，是给main又添加了一个子元素，用子元素来控制main所要显示内容的宽度与位置，这是一个不错的方法，但从结构上来讲，我们是凭空添加了一个空的标签，这并不理想。

       后来在The Web-Arsenal一文中发现了一种妥善的解决方法，即标题中的CSS圣杯布局。

       整体的思路跟《css双飞翼布局》是致的，只是后来并没有给main添加子元素，而是利用相对定位来实现效果。

HTML

<div class="wrap">

<div class="main">maindiv>

<div class="left">left</div>

<div class="right">right</div>

</div>

 

CSS

.wrap {padding:0 100px 0 120px; overflow;hidden; zoom:1; }

.main,.left,.right { float:left; height:200px; }

.main { width:100%; background:#eee; }

.left {width:120px; margin-left:-100%; background:#ace;position:relative; left:-120px; }

.right{width:100px; margin-left:-100px; background:#f50; position:relative; right:-100px;  }

 

解析：首先给外围div.wrap设置一个左右padding值（这个值要与左右两边宽度对等哦），来固定div.main的范围，然后在原有基础上将div.left div.right分别设置相对定位，再用left、right的位移来控制各自的显示位置，让left与right刚好能够填补左右两边的空白，以达到效果。但是在IE6下面显示并不如意，你会发现left不见了……这时，可以单独针对left在IE6下面重写样式：

.left{ left:100px; } 

 

注意：left:100px   这里的left(100px) = width(right) = 100 【这里可以根据情况设定宽度值，只要满足公式就行】

不要问我为什么，其实我也不晓得，谁让IE6是后妈养大的，比较怪异呢。但能肯定的是这种办法可以可以解决问题！

 

【另外一点值得说明的是，圣杯布局只有对左右两边宽度为固定像素值的元素才会生效，百分比是无效的。因为元素的宽度为百分比，他是根据父级的宽度来计算的，而这里，我们给父级设置了 padding值（宽度不明确），如果再给子左右两边设置百分比宽度，那就无法精确计算了。】

 

具体可参考：

http://hi.baidu.com/pop123shen/item/2929385d4d4f663594eb053b