聖盃佈局和雙飛翼佈局的理解與思考

聖盃佈局和雙飛翼佈局的理解與思考

聖盃佈局和雙飛翼佈局都是前端工程師須要平常掌握的重要佈局方式。按照個人理解，其實聖盃佈局和雙飛翼佈局的實現，目的都是在於<font color=red>兩欄固定寬度，中間部分自適應</font>

可是實際實現起來 仍是有一些區別的

聖盃佈局

圖爲：

在這裏實現了 左（200px）、右（300px）、中間自適應。

注：

html代碼中，middle部分首先要放在最前面部分，而後是left、right，以便先行渲染

結構：

首先定義出整個佈局的DOM結構，主題部分是由content包裹的middle、left，right三列，其中middle定義在最前面。

css

左側的固定寬度爲200px，右側的固定寬度爲300px，則在content上設置

爲左右兩列預留出相應的空間

而後分別給三列設置寬度與浮動

獲得以下效果：

根據浮動的特性，middle的寬度爲100%，因此佔據了第一行的全部空間，left和right被擠到了第二行

接下來將left和right放置到以前預留出的位置

隨後使用定位position：relative，在left、right
原來的位置基礎上左移200，右移300

最終效果爲：

到這基本佈局效果已經完成，但仍是在考慮最後一步，那就是寬的問題，以前爲了預留左右位置設置了padding屬性，因此這裏計算寬的時候不要忘記了這個

---

雙飛翼佈局

仍是以上述格局數據爲例，設置各列的寬度與浮動，而且預留出空間

結構：

雙飛翼佈局的DOM結構與聖盃佈局的區別是middle還有一個子元素inner

css

最終效果爲：

因爲雙飛翼佈局沒有用到position：relative
因此不考慮計算寬度，預留多少空間，就設置多少空間

---

若是，您認爲閱讀這篇博客讓你有些收穫，請您關注一下。感謝您的支持，若有不足，請多指教。

微信號：bsl521921