自己对于圣杯布局和双飞翼布局的一些理解
首先圣杯布局和双飞翼布局的差异体现在 都是想给左右浮动空出位置。
那么就只有两条路可以走:
1:用padding的方法 padding:0 100px;
2.用margin的方法 margin:0 100px;
用第一种方法走到底就是 圣杯布局,用第二种方法走到底就是 双飞翼布局。,
第一种方法 代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> .header,.footer{ height:100px; width:100%; background:red; clear:both; } .content{ padding:0 200px; overflow: auto; } .main{ width:100%; float:left; height:100px; background:yellow; } .left{ width:200px; height:100px; background:pink; float:left; margin-left:-100%; position: relative; left:-200px; } .right{ width:200px; height:100px; background:green; float:left; margin-left:-200px; position: relative; left:200px; } </style> </head> <body> <div> <div class="header"> 头部 </div> <div class="content"> <div class="main">中间部分。</div> <div class="left">左侧边栏</div> <div class="right">右侧边栏</div> </div> <div class="footer"> 页脚 </div> </div> </body> </html>
效果图:
圣杯布局要注意的是:main中间部分需要放在第一个加载。另外中间部分宽度为100%撑满正行,左右侧边栏利用负margin上来。最后用position:relative将左右两侧边栏移到两边。
双飞翼布局
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style> .header,.footer{ height:100px; width:100%; background:red; clear:both; } .main_link{ width:100%; height:100px; background:yellow; float:left; } .main{ margin:0 200px; } .left{ width:200px; height:100px; background:pink; float:left; margin-left:-100%; } .right{ width:200px; height:100px; background:green; float:left; margin-left:-200px; } </style> </head> <body> <div class="header">头部</div> <div class="content"> <div class="main_link"> <div class="main">中间部分</div> </div> <div class="left">左侧边栏</div> <div class="right">右侧边栏</div> </div> <div class="footer">页脚</div> </body> </html>
双飞翼的布局感觉思路就是。如果左右两侧边栏要和我main抢位置?那我为什么不直接空出来位置好了。不和你们抢了。
就给main加个div。让这个div宽度取100% 和left和right浮动起来,然后main取一个margin:0 200px;把左右侧边栏的的位置给空出来 不就行了么?
然后用负margin 让left和right移动上去。