聖盃佈局淺析

佈局思路：
外面一個大div,裏面三個小div(都是浮動)。實現左右兩欄寬度固定，中間寬度自適應。中間欄優先渲染。

 

 

1.基本佈局

 

 外面一個大div，裏面三個小div。注意中間欄寫在前面，優先渲染。

 

 

2.外面大div設置左右padding值，分別是左右兩欄的寬度(兩欄之間如有空隙可適當增長margin值)。中間的width讓Main所有充滿。因爲Main佔據整個父元素width，Left和Right則被擠到下一行顯示(注意此時Left和Main是對齊的)。

CSS以下：

 

效果以下：

 

 

 

3.將左右兩欄移至上一行，此時要用到margin-left的負值效果。
代碼以下：

 此時Left和Right分別移到了Main的首尾位置。(此時的字母Main已看不見)

 

效果以下：

 

 

4.因爲此時的Left和Right都遮擋住了部分Main，因此還須要作調整。用position:relative來進行微調。

代碼以下：

也能夠用負值：
#left {position:relative;left:-200px;}
#right {position:relative;right:-200px;}

 

效果以下：

 

此時聖盃佈局完成。

 

資料參考：https://blog.csdn.net/yinmazuo/article/details/50218657

           http://cnodejs.org/topic/56d70d5f4dfa4031185aabbf