聖盃佈局，雙飛翼佈局詳解

聖盃佈局和雙飛翼佈局解決的問題是同樣的，都是用來解決左右定寬，中間自適應的三欄佈局，中間欄要放在文檔流前面以優先渲染。

聖盃佈局和雙飛翼佈局：三欄所有加上float：left，左右兩欄加上負margin，以造成三欄佈局。

聖盃佈局：大的div設置padding-left和padding-right，左右兩個div用相對佈局position: relative，加上right和left屬性。
雙飛翼佈局：中間div內加一層標籤，在設置內層標籤的margin

 

 html聖盃佈局：

 <div class="content">
        <div class="main">
            <p>主內容欄自適應寬度</p>
        </div>
 
        <div class="aside-1">
            <p>側邊欄1固定寬度</p>
        </div>
 
        <div class="aside-2">
            <p>側邊欄2固定寬度</p>
        </div>
    </div>

css聖盃佈局：

 /* 左中右 三欄自適應 */
    .content {
        padding-left:210px;
        padding-right:210px;
    }
     .main {
        float:left;
        width:100%;
    }
    .aside-1 {
        float: left;
        width:200px;
        margin-left: -100%;
 
        position:relative;
        left: -210px;
        _left: 210px; /*IE6 hack*/
    }
     .aside-2 {
        float: left;
        width:200px;
        margin-left: -200px;
 
        position:relative;
        right: -210px;
    }
 

聖盃佈局詳解：

a. 爲3個欄都添加了float:left以後：（height能夠不寫）

.content{padding-left: 210px;padding-right: 210px;}
.main{background: yellow;height: 200px;width: 100%;float: left;}
.aside-1{background-color: blue;height: 200px;width: 200px;float: left;}
.aside-2{background: green;height: 200px;width: 200px;float: left;}

 

 

b. .aside-1{margin-left:-100%;} 讓aside-1跑到上面的左邊

    .aside-2{margin-left:-200px;}aside-2寬200px,讓其跑到上面的右邊

c. 相對定位position:relative

.aside-1{position:relative;left:-210px;} 相對與黃色那塊的位置，left是相對於黃色的左邊框，藍色塊往左移動210px

.aside-2{position:relative;right:-210px;} right是相對於黃色的右邊框，綠色塊往右移動210px

 

 

 CSS雙飛翼佈局：

 三欄所有加上float：left，左右兩欄加上負margin，以造成三欄佈局。

與聖盃佈局的區別：（1）無相對定位，left，right使用；（2）html中main內多加了一個div；

在main內部加一個main-inner

html雙飛翼佈局：

1 <div class="content">
2     <div class="main">
3         <div id="main-inner"><p>主頁面</p>
4         </div>
5         </div>    
6     <div class="aside-1"><p>左側欄的頁面</p></div>
7     <div class="aside-2"><p>右側欄的頁面</p></div>
8 </div>

css中，設置main-inner的左右margin值

1 #main-inner{margin:0 210px 0 210px;}

.content的左右padding值去掉。

完整CSS雙飛翼佈局以下：

1 .main{background: yellow;width: 100%;float: left;}
2 .aside-1{background-color: blue;width: 200px;float: left;margin-left: -100%;}
3 .aside-2{background:green;width: 200px;float: left;margin-left: -200px;}
4 #main-inner{margin:0 210px 0 210px;}