关于圣杯布局,我个人觉得比双飞翼要简单一些,和双飞翼不同的是,圣杯布局用了padding和相对定位来实现双飞翼布局的效果,而嵌套关系也不太一样,圣杯布局是把middle、left、right放在container里面写,而双飞翼是把container放在middle里面。
圣杯布局的样式大概是这个样子的
.left, .middle, .right{ position: relative; float: left; height: 500px; } .container{ padding:0 200px 0 200px; overflow: hidden; } .left{ margin-left: -100%; left: -200px; width: 200px; } .right{ margin-left: -200px; right: -200px; width: 200px; } .middle{ width: 100%; }