三欄布局中間自適應(yīng)總結(jié)

superPershing 發(fā)布于2019-08-01 16:27 / 3188人閱讀

摘要：三欄布局，中間自適應(yīng)這個(gè)經(jīng)典的問(wèn)題，之前也看了很多。需要對(duì)中間或者兩邊的屬性進(jìn)行微調(diào)，否則中間與兩邊高度不齊，效果如下所示方式三浮動(dòng)負(fù)值法又被稱為雙飛翼布局法中間左邊右邊注意點(diǎn)要放在最前面，這樣和才能覆蓋上去。

三欄布局，中間自適應(yīng)這個(gè)經(jīng)典的問(wèn)題，之前也看了很多。今天準(zhǔn)備在自己的博客里面總結(jié)一下，加深自己的理解。

方式一：左邊左浮動(dòng)，右邊右浮動(dòng)，中間自適應(yīng)

注意點(diǎn)：
1.

一定要放在最后*，因?yàn)槿绻鹠iddle放在第一個(gè)，會(huì)占據(jù)文檔流位置，left和right的浮動(dòng)只能從第二行開(kāi)始了。
2.當(dāng)瀏覽器窗口很小的時(shí)候，最右邊元素會(huì)被壓迫到下一行。

下面附上效果圖：

方式二：絕對(duì)定位法

注意點(diǎn)：
1.因?yàn)槭墙^對(duì)定位，所以middle、left和right的位置先后順序可以隨便放。
2.需要對(duì)中間或者兩邊的top屬性進(jìn)行微調(diào)，否則中間與兩邊高度不齊，效果如下所示

方式三：浮動(dòng)+margin負(fù)值法（又被稱為雙飛翼布局法）



中間

左邊
右邊

注意點(diǎn)：
1.middke要放在最前面，這樣left和right才能覆蓋上去。
2.left的margin-left設(shè)置成-100%，浮動(dòng)到第一行最左側(cè)，right的margin-left設(shè)置成負(fù)的自身寬度，正好浮動(dòng)到第一行最右側(cè)。
3.

的border寬度會(huì)影響left盒子和right盒子向第一行浮動(dòng)的位置，因?yàn)闀?huì)把border的寬度算進(jìn)去，比如本例子中，如果border沒(méi)有被注釋掉，right盒子的margin-left設(shè)置成-300是無(wú)法浮動(dòng)到第一行的，要-304才能浮動(dòng)到第一行，加上了border的寬度。
4.在middle里面嵌套一個(gè)main盒子，是為了通過(guò)main盒子設(shè)置margin-left和margin-right。如果直接在浮動(dòng)的middle上設(shè)置，是會(huì)有問(wèn)題的，整體會(huì)向右偏移margin-left距離。

效果圖如下：

方法四：css3 彈性盒子flex

注意點(diǎn)：
1.代碼十分簡(jiǎn)潔，只要在最外層加一個(gè)大盒子包裹，并設(shè)置display等于flex就可以了，間距可以用margin進(jìn)行調(diào)整。
2.middle盒子一定要放在中間，按順序來(lái)。
3.當(dāng)瀏覽器窗口縮到很小時(shí)，也不會(huì)把最右邊的right盒子擠到下一行。

效果圖如下：

總結(jié)：這就是常用的幾種布局方式，還有一種圣杯布局法原理跟雙飛翼相似，但是更復(fù)雜一些，相比而言還是推薦雙飛翼布局法。彈性盒子的布局法應(yīng)該是最簡(jiǎn)潔實(shí)用的，優(yōu)點(diǎn)比較突出。