1、定位
我是左邊，我是固定的
我是中間，我是自適應的，左邊右邊都position固定了，他們脫離了文檔流，我終于得到機會擠進中間啦！只要我margin一下就沒人會擋住我啦！我可真是個小機靈鬼(同時，我還是個自由人，我div寫在開頭中間結尾都可以呢)
我是右邊，我也是固定的
2、浮動
我是左邊，我是固定的
我是右邊，我也是固定的
我是中間，我是自適應的，左右浮動脫離了文檔流，我才擠進來呢，margin一下也不會被擋住啦（這里我div必須在左右的后面，因為我在前面的話，他們會浮在我后面的喲）
.left, .right{
width: 200px;
height: 200px;
background: red;
}
.left{
float: left;
}
.right{
float: right;
}
.middle{
height: 200px;
background:#efbdbd;
margin-left: 200px;
margin-right: 200px;
}
3、圣杯布局
我是中間，我是自適應的
1、左中右float：left；順便position：relative后面會用到
2、中間width：100%；
3、這時，中間元素會把兩邊撐開，那么我們用margin-left把他拉回來；
4、兩邊元素倒是回來了，中間被蓋住了怎么辦？不著急，整個外層加個padding；
5、解決了上一個問題，左右元素又偏了！還記得剛開始的定位嗎？對！對左右元素定位就好啦！
(我div必須在第一位)
我是左邊，我是固定的
我是右邊，我也是固定的
4、雙飛翼布局
我是中間，我是自適應的
1、左中右float：left；
2、中間width：100%；
3、這時，中間元素會把兩邊撐開，那么我們用margin-left把他拉回來；
4、兩邊元素倒是回來了，中間被蓋住了怎么辦？這次我們不在整個外層加個padding了；我們在middle里面加個子標簽并margin
5、可以啦！
(我div必須在第一位)
我是左邊，我是固定的
我是右邊，我也是固定的
5、flex
我是左邊，我是固定的
我是中間，我是自適應的，利用css3的新屬性fles，彈性布局，父元素設置display:flex,中間div設置flex；1；
我是右邊，我也是固定的
如果想要做兩列布局（左邊固定，右邊自適應），全部可以參考這個，唯一有一種方法自己的方法利用BFC也很簡單。
圣杯布局和雙飛翼布局是參考了這位同學的，可以說是照搬來的。
https://www.cnblogs.com/imwtr...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114291.html
