圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。
解决方案大体相同,都是三栏全部 float:left 浮动,区别在于解决中间栏div的内容不被遮挡上。
圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话)。
双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在中间栏的上面,中间栏还是100%宽度,只不过中间栏的内容通过margin的值显示在中间。
圣杯式布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .header { height: 50px; background: #eee; text-align:center; } .body { /*左右栏通过添加负的margin放到正确的位置了,此段代码是为了摆正中间栏的位置*/ text-align:center; padding:0 200px 0 100px; height:100px; } .middle { float:left; width:100%; height:100px; background: #aaa; } .left { float:left; width:100px; height:100px; margin-left: -100%; background: #0c9; /*中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置*/ position:relative; left:-100px; } .right { float:left; width:200px; height:100px; margin-left: -200px; background: #0c9; /*中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置*/ position:relative; right:-200px; } .footer { height: 50px; background: #666; text-align:center; } </style> </head> <body> <div class="header">header</div> <div class="body"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body> </html>
双飞翼式布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .header { height: 50px; background: #eee; text-align:center; } .middle { float: left; width:100%; height:100px; background: blue; } .inside { margin: 0 20px 0 180px; height:100px; } .left { float:left; width:100px; height:100px; margin-left: -100%; background: #0c9; } .right { float:left; width:200px; height:100px; margin-left: -200px; background: #0c9; } .footer { clear:both; height: 50px; background: #666; text-align:center; } </style> </head> <body> <!-- 双飞翼布局是在middle的div里又插入一个div,通过调整内部div的margin值,实现中间栏自适应,内容写到内部div中。 --> <div class="header">header</div> <div class="middle"> <div class="inside">middle</div> </div> <div class="left">left</div> <div class="right">right</div> </body> </html>