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