成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

superPershing / 3194人閱讀

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

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

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

注意點(diǎn)：
1.

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

下面附上效果圖：

方式二：絕對定位法

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

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





中間




左邊


右邊

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

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

效果圖如下：

方法四：css3 彈性盒子flex

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

效果圖如下：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50529.html

相關(guān)文章

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

    摘要：三欄布局，中間自適應(yīng)這個經(jīng)典的問題，之前也看了很多。需要對中間或者兩邊的屬性進(jìn)行微調(diào)，否則中間與兩邊高度不齊，效果如下所示方式三浮動負(fù)值法又被稱為雙飛翼布局法中間左邊右邊注意點(diǎn)要放在最前面，這樣和才能覆蓋上去。 三欄布局，中間自適應(yīng)這個經(jīng)典的問題，之前也看了很多。今天準(zhǔn)備在自己的博客里面總結(jié)一下，加深自己的理解。 方式一：左邊左浮動，右邊右浮動，中間自適應(yīng) .left{ ...

    李義 評論0 收藏0

  • CSS || 三欄布局，兩邊固定，中間自適應(yīng)

    摘要：實(shí)現(xiàn)基于純實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在結(jié)構(gòu)的最后，否則右側(cè)會沉在中間內(nèi)容的下側(cè)原理元素浮動后，脫離文檔流，后面的元素受浮動影響，設(shè)置受影響元素的值即可兩邊固定寬度，中間寬度自適應(yīng)。 1 float實(shí)現(xiàn) 基于純float實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在HTML結(jié)構(gòu)的最后，否則右側(cè)會沉在中間內(nèi)容的下側(cè) 原理：元素浮動后，脫離文檔流，后面的元素受浮動影響，設(shè)置受影響元素的margi...

    pcChao 評論0 收藏0

  • 三欄布局（一）-------左右寬高固定，中間自適應(yīng)

    摘要：幼圓常見的頁面布局有幼圓左右寬度固定，中間自適應(yīng)幼圓上下高度固定，中間自適應(yīng)幼圓左寬度固定，右自適應(yīng)幼圓上高度固定，下自適應(yīng)，幼圓下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局左右寬高固定，中間自適應(yīng)幼圓有種布局方常見的頁面布局有 1、左右寬度固定，中間自適應(yīng)； 2、上下高度固定，中間自適應(yīng)； 3、左寬度固定，右自適應(yīng)； 4、上高度固定，下自適應(yīng)， 下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局-左右寬...

    Aldous 評論0 收藏0

  • 三欄布局（二）-------上下寬高固定，中間自適應(yīng)

    摘要：上一篇寫的是左右寬高固定，中間自適應(yīng)，根據(jù)上一篇的內(nèi)容，總結(jié)了下上下寬高固定，中間自適應(yīng)的幾種布局方式，有種布局方式話不多說，直接上代碼。上一篇寫的是左右寬高固定，中間自適應(yīng)，根據(jù)上一篇的內(nèi)容，總結(jié)了下上下寬高固定，中間自適應(yīng)的幾種布局方式， 有4種布局方式：? ?position;? ?flex;? ? table;? ?grid; 話不多說，直接上代碼。 DOCTYPE html> ...

    Render 評論0 收藏0

  • 假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法

    摘要：假設(shè)高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應(yīng)的五種方法頁面布局題目假設(shè)高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應(yīng)浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法 HTML CSS 頁面布局 題目：假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px...

    alaege 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<