圣杯布局和双翼布局基本相同，为两侧固定宽度、中间自适应三层布局，其中中间一层位于文档流之前，保证了超前渲染。 解决方案大致相同，3列全部浮动： left浮动。 区别在于解决中间列的div内容不被隐藏。 圣杯布局中中间列添加了相对位置，符合left和right的属性。 有效地，三列表示为单独分开(如果可以看到间隙)，双翼布局在中间列的div中嵌套一个div，在嵌套内容的下一个嵌套div中设置“margin-left”和“margin-right” 有效地，左侧和右侧列位于中间列的上方，中间列仍为100%宽，中间列的内容以边距值居中显示。 效果如下。 【圣杯布局】
在这里，实现了左(200px )右)宽固定、中间自适应、容器部分的高度一致。 html代码的middle部分首先位于容器的开头。 然后是左，右1。 三个都将另一个位置： relative添加到浮动3360 left中。 2.middle部分的width:100%将填满(因为稍后将使用相对对齐)。 此时，由于middle已满，因此left使用margin-left:-100% 4。 此时，left返回，但为了覆盖middle内容的左端并提取middle内容，将padding 33600220 px 0200 px5. middle内容返回到外围容器。 与对left使用相对定位left:-200px一样，right也必须通过相对定位恢复right:-220px 6。 能适应到这里吧。 如果要匹配容器的高度，可以将最小高度：130 px添加到左中间光线中，而不会衰减ie的问题。 ie6/7/8/9中以下的空白高度不同。 doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title圣杯布局/title style *{ margin: 0； padding: 0； } body{min-width: 700px； } .header， footer{ border: 1px solid #333； 后台： # AAA； 文本对齐3360中心； } .left， middle， right{ position: relative； 浮点：左； min-height: 130px； } .container{ /*2.左右栏通过添加负margin放置到了正确的位置，但中间的蓝色内容被隐藏了，因此此段代码位于中间栏的位置*/padding:0 220px 0 200px； Overflow :隐藏； } .left{ width: 200px； 后台： red； margin-left: -100%； /*1.将左栏向上和中间拨成一行。 为什么呢？ 为什么要去上面的行呢？ *//*我知道是怎么回事。 将左栏向左移动100%的话，如果现在的宽度不够的话就会向上逃跑。 */left: -200px； /*3.中栏位置正确后，左栏位置也相应向右移动，在相对定位的left上正确位置*/} .right{ width: 220px； 背景：绿色； 玛格琳- left :-220 px； /*在右栏上方和中间一行。 为什么呢？ 为什么去上面的行呢？ *//*到左栏，右栏到第二行开始，向左走220px。 因为左边没有位置，所以向上走，从末尾向左走220px*/right: -220px。 /*中间栏位置正确后，右栏位置也相应左移，通过相对对齐的right，相对于自己的原始位置返回正确位置*/} .middle{ width: 100%； /*中间的栏占100%，左右的栏掉了。 * /背景： blue； 魔兽世界： break-all； } .footer{ clear: both； (} /style/headl
t;body><div class="header"> <h4>header</h4></div><div class="container"> <div class="middle"> <h4>middle</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div></div><div class="footer"> <h4>footer</h4></div></body></html> 【双飞翼布局】 听说双飞翼布局是结实的奇迹大大提出来的，始于淘宝UED 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方. 其实跟上边的圣杯布局差不多的,双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。 左翅sub有200px,右翅extra..220px.. 身体main自适应未知 1.html代码中，main要放最前边，sub extra 2.将main sub extra 都float:left 3.将main占满 width:100% 4.此时main占满了，所以要把sub拉到最左边，使用margin-left:-100% 同理 extra使用margin-left:-220px（这时可以直接继续上边圣杯布局的步骤，也可以有所改动）
5.main内容被覆盖了吧，这次我们不用padding，而使用margin。 给main增加一个内层div– main-inner, 然后margin:0 220px 0 200px <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>双飞翼布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{min-width: 700px;} .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .sub, .main, .extra{ float: left; min-height: 130px; } .sub{ margin-left: -100%; /* 我知道咋回事了，左栏向左移动宽度整个100%，那当前宽度不够就会往上窜*/ width: 200px; background: red; } .extra{ margin-left: -220px; /*左栏上去了，那么右栏就会跑到第二行开始处，再向左220px，因为左面没有地方了，所以就向上一行中，从末尾处往左移220px*/ width: 220px; background: blue; } .main{ width: 100%; } .main-inner{ margin-left: 200px; margin-right: 220px; /*和圣杯布局的区别middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。*/ min-height: 130px; background: green; word-break: break-all; } .footer{ clear: both; } </style></head><body><div class="header"> <h4>header</h4></div><div class="main"> <div class="main-inner"> <h4>main</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div></div><div class="sub"> <h4>sub</h4> <p>oooooooooooooo 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p></div><div class="extra"> <h4>extra</h4> <p>BBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB 88888888888888888888</p></div><div class="footer"> <h4>footer</h4></div></body></html> 双飞翼和圣杯布局的区别就是middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。