資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)基于純實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在結(jié)構(gòu)的最后，否則右側(cè)會(huì)沉在中間內(nèi)容的下側(cè)原理元素浮動(dòng)后，脫離文檔流，后面的元素受浮動(dòng)影響，設(shè)置受影響元素的值即可兩邊固定寬度，中間寬度自適應(yīng)。
1 float實(shí)現(xiàn)
基于純float實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在HTML結(jié)構(gòu)的最后，否則右側(cè)會(huì)沉在中間內(nèi)容的下側(cè)
原理：元素浮動(dòng)后，脫離文檔流，后面的元素受浮動(dòng)影響，設(shè)置受影響元素的margin值即可
兩邊固定寬度，中間寬度自適應(yīng)。
利用中間元素的margin值控制兩邊的間距
寬度小于左右部分寬度之和時(shí)，右側(cè)部分會(huì)被擠下去
2 position實(shí)現(xiàn)左側(cè)右側(cè)中間
基于絕對(duì)定位的三欄布局：注意絕對(duì)定位的元素脫離文檔流，相對(duì)于最近的已經(jīng)定位的祖先元素進(jìn)行定位。無需考慮HTML中結(jié)構(gòu)的順序
缺點(diǎn)：有頂部對(duì)齊問題，需要進(jìn)行調(diào)整，注意中間的高度為整個(gè)內(nèi)容的高度
3 float和BFC配合圣杯布局左側(cè)中間右側(cè)
必須將中間部分的HTML結(jié)構(gòu)寫在最前面，三個(gè)元素均設(shè)置向左浮動(dòng)。兩側(cè)元素寬度固定，中間設(shè)置為100%；然后利用左側(cè)元素負(fù)的margin值進(jìn)行偏移，覆蓋在中間的寬度之上；右側(cè)的元素同樣利用負(fù)的margin值進(jìn)行覆蓋
存在的問題：不能自適應(yīng)高度
4 flex布局中間左側(cè)右側(cè)
flexbox布局最簡(jiǎn)潔使用，并且沒有明顯缺陷。
僅需將容器設(shè)置為display:flex;，盒內(nèi)元素兩端對(duì)其，將中間元素設(shè)置為100%寬度即可填充空白，再利用margin值設(shè)置邊距即可
并且盒內(nèi)元素的高度撐開容器的高度
5 總結(jié)左側(cè)中間右側(cè)
純float的三欄布局需要將中間的內(nèi)容放在最后；
絕對(duì)定位的三欄布局：元素對(duì)其有點(diǎn)問題
圣杯布局：容器內(nèi)不能撐開高度
flex布局最好，基本沒有大的缺點(diǎn)。
純
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111744.html
摘要：?jiǎn)栴}已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應(yīng)回答效果示例解決方案浮動(dòng)絕對(duì)定位彈性布局表格布局網(wǎng)格布局。方案二絕對(duì)定位將和的都設(shè)置脫離文檔流，給的設(shè)置左右兩邊距離即左右兩邊盒子的實(shí)際寬度。 問題： 已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應(yīng)showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...
摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...
摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁面的形象表達(dá)。一起來看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問的問題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗(yàn)嘛~ 事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都...
摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁面的形象表達(dá)。一起來看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問的問題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗(yàn)嘛~ 事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都...
閱讀 2478·2021-11-16 11:52
閱讀 2402·2021-11-11 16:55
閱讀 835·2021-09-02 15:41
閱讀 3057·2019-08-30 15:54
閱讀 3221·2019-08-30 15:54
閱讀 2324·2019-08-29 15:39
閱讀 1632·2019-08-29 15:18
閱讀 1054·2019-08-29 13:00
