雙飛翼布局和圣杯布局都是實現兩邊固定中間自適應的三欄布局的方式，最近在整理三欄布局實現方式的筆記，決定但拉出來一篇，記一下這兩個經典布局。
1、圣杯布局
浮動、負邊距、相對定位、不添加額外標簽
效果圖
DOM結構：
| <div class="header">Header</div><div class="bd"> <div class="main">Main</div> <div class="left">Left</div> <div class="right">Right </div></div><div class="footer">Footer</div> |
樣式：
| <style> body{padding:0;margin:0} .header,.footer{width:100%; background: #666;height:30px;clear:both;} .bd{ padding-left:150px; padding-right:190px; } .left{ background: #E79F6D; width:150px; float:left; margin-left:-100%; position: relative; left:-150px; } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; margin-left:-190px; position:relative; right:-190px; } </style> |
左中右部分樣式變化過程
1、中間部分需要根據瀏覽器寬度的變化而變化，所以要用100%，這里設*左中右向左浮動，因為中間100%，左層和右層根本沒有位置上去
| .left{ background: #E79F6D; width:150px; float:left; } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; } |
2、把左層負margin150后，發現left上去了，因為負到出窗口沒位置了，只能往上挪
| .left{ background: #E79F6D; width:150px; float:left; margin-left:-150px; } |
3、那么按第二步這個方法，可以得出它只要挪動窗口寬度那么寬就能到最左邊了，利用負邊距，把左右欄定位
| .left{ background: #E79F6D; width:150px; float:left; margin-left:-100%; }.right{ background: #77BBDD; width:190px; float:left; margin-left:-190px; } |
新聞熱點
疑難解答
