1、圣杯布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } /*设置最小高度*/ body{ min-width: 600px; } #header,#footer{ width: 100%; height: 50px; background-color: lightskyblue; text-align: center; line-height: 50px; } /*通过padding的值进行调节*/ #content{ padding: 0 200px; /*overflow: hidden;*/ } #middle,#left,#right{ /*height:200px;*/ float: left; /*伪登高*/ padding-bottom: 10000px; margin-bottom: -10000px; } #left,#right{ width: 200px; background: red; } /*通过定位进行左右的固定*/ #left{ margin-left: -100%; position: relative; top: 0; left: -200px; } #right{ margin-left: -200px; position: relative; top: 0; right: -200px; } #middle{ width: 100%; background: yellowgreen; } /*清除浮动*/ .clearfix{ content: " "; display: block; clear: both; } </style> </head> <body> <div id="header">header</div> <div id="content" class="clearfix"> <div id="middle">middle</div> <div id="left"> left<br> left<br> left<br> left<br> left<br> left<br> </div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> </html>
2、双飞翼布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } body{ min-width: 600px; } #header,#footer{ width: 100%; height: 50px; background-color: lightskyblue; text-align: center; line-height: 50px; } /*清除浮动*/ #content{ overflow: hidden; } #middle,#left,#right{ /*height:200px;*/ float: left; padding-bottom: 10000px; margin-bottom: -10000px; } #left,#right{ width: 200px; background: red; } #left{ margin-left: -100%; } #right{ margin-left: -200px; } #middle{ width: 100%; background: yellowgreen; overflow: hidden; } /*通过在主加载元素中添加新的div,利用margin调节*/ #middle_inner{ margin-left: 200px; margin-right: 200px; background-color: cyan; padding-bottom: 10000px; margin-bottom: -10000px; } </style> </head> <body> <div id="header">header</div> <div id="content" class="clearfix"> <div id="middle"> <div id="middle_inner">middle</div> </div> <div id="left"> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> <!--left<br>--> </div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> </html>
3、异同
相同:
(1)都是将主列放在文档流的最前面,使主列优先加载
(2)两种布局都是让三列浮动,在通过调节负外边距形成三列布局
不同:
中间位置的处理:
圣杯是利用父容器左右内边距+定位;
双飞翼将主列中嵌套div,然后利用
#middle-inner{ margin-left: 200px; margin-right: 200px; }