雙飛翼佈局與聖盃佈局

1、聖盃設計思路：

DOM結構：

<div class="container">

    <div class="main">main</div>

    <div class="left">left</div>

    <div class="right">right</div>

</div>

思路：

1.將div.container經過padding來設置左右的空閒位置來讓左右欄佔據，因此設置padding-left爲左欄寬度，padding-right爲右欄寬度。

2.讓三個元素統一左浮動，從左到右開始順序爲main,left,right。

3.而後設置div.main的寬度爲100%，讓它佔據container的一行內容。

4.設置左欄的margin-left爲-100%，右欄margin-left爲其width的負值，這樣左欄和右欄就會分別在main的左右兩邊

5.設置左右欄爲相對定位，而後將左右欄定位到左右的空白處

 

聖盃佈局

參考代碼：

 

 

2、雙飛翼佈局設計思路：

DOM結構：

<div>

    <div class="main">

        <div class="content"></div>

    </div>

    <div class="left"></div>

    <div class="right"></div>

<div/>

 

思路：

與聖盃佈局相相似，但由於雙飛翼佈局，採起了div.main中嵌套一個div.content，所以，利用div.content設置margin，來讓左右兩邊騰出位子來讓左右欄，就不須要使用相對定位了：

1.設置div.main的寬度爲100%，讓它佔據container的一行內容。

2.讓三個元素統一左浮動，從左到右開始順序爲main,left,right。

3.設置左欄的margin-left爲-100%，右欄margin-left爲其width的負值，這樣左欄和右欄就會分別在main的左右兩邊

4.div.content設置margin，來讓左右兩邊騰出位子來讓左右欄佔據。

參考代碼：