聖杯布局和雙飛翼布局的效果都是兩邊定寬，中間自適應。隨著頁面的移動中間的大小發生改變。但是到達一定的情況下，布局不在水平布局。
下面我將詳細講解聖杯布局和雙飛翼布局的思想。資源參考於
聖杯布局
思想：假設左邊定寬180px,右邊定寬200px。則首先在middle上面設定
.middle
為左右預留空間
隨後分別為三列設定寬度與浮動，同時對footer設定清除浮動：
根據浮動的特性，由於center的寬度為100%，即佔據了第一行的所有空間，所以left和right被擠到了第二行。
接下來的工作是將left放置到之前預留出的位置上，這裡使用負外邊距
隨後還需要使用定位方法
雙飛翼布局
html
middle
left
right
#middle
#left
#right
/*給內部div新增margin，把內容放到中間欄，其實整個背景還是100%*/
聖杯和雙飛翼布局
聖杯布局 原理 給包裹層設定左右padding值空出left和right的位置，使用負邊距，左邊margin left 100 右邊margin left 100px 此時左右兩個盒子位於主盒子兩側但是會遮擋住主盒子的內容，所以再給左盒子position relative，left 100px，右盒...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...
聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...