圣杯与双飞翼

圣杯与双飞翼都是实现左右定宽，中间自适应的三列布局，如下图

          

---

圣杯	双飞翼
代码： * { margin: 0; padding: 0; } .top,.bottom{ width: 100%; line-height: 40px; background-color: red; text-align: center; } .content{ /*清除浮动*/ overflow: hidden; } .left,.right,.main{ float: left; } .main { background-color: crimson; width: 100%; } .left { width: 40px; height: 60px; background-color: #B9E078; /* 让此模块移动到main的左边 */ margin-left: -100%; } .right { width: 60px; height: 80px; background-color: #FF9900; /*让此模块移动到main的右边，移动距离为自身的宽度*/ margin-left: -60px; }

总体思路：

刚开始都是一样的，三个模块（main,left,right）全部左浮动,在最外层给个div清除浮动，给main一个100%的宽度，让它独占一行，另外两个在另一行并排，然后通过给left和right设置左边距的负值，让它们跑到与main同行内，但是就会出现，他们覆盖掉main的内容的问题。

圣杯思想：给content一个左右padding，然后让left和right 分别定位到padding区域（通过相对定位的left和right）

双飞翼思想：在main里面还有一个main-inner,给他设置一个左右margin,将left和right的宽度给留出来。