聖盃佈局的實現過程
聖盃佈局和雙飛翼佈局,他們的都要求三列布局,中間寬度自適應,兩邊定寬,這樣做的優勢是重要的東西放在文檔流前面可以優先渲染,而雙飛翼佈局是對聖盃佈局的一種改良,下一篇文章會講到。
聖盃佈局:用到浮動、負邊距、相對定位,不添加額外標籤
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; }
4、然而問題來了,中間被左右擋住了啊,只好給外層加padding了
.bd{ padding-left:150px; padding-right:190px; }
5、但是加了之後左右欄也縮進來了,於是採用相對定位方法,各自相對於自己把自己挪出去,得到最終結果
.left{ background: #E79F6D; width:150px; float:left; margin-left:-100%; position: relative; left:-150px; } .right{ background: #77BBDD; width:190px; float:left; margin-left:-190px; position:relative; right:-190px; }
原文http://www.cnblogs.com/tinyphp/p/4742922.html