圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧

按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。 圣杯布局 实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 1.将三者都设置 float:left, position:relative (因为相对定位后面会用到） 2.middle设置 width:100% 占满一行 3.此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100% 4.这