国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

pcChao / 3493人閱讀

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

1 float實現(xiàn) 
基于純float實現(xiàn)的三欄布局需要將中間的內(nèi)容放在HTML結(jié)構(gòu)的最后，否則右側(cè)會沉在中間內(nèi)容的下側(cè)


原理：元素浮動后，脫離文檔流，后面的元素受浮動影響，設(shè)置受影響元素的margin值即可

兩邊固定寬度，中間寬度自適應(yīng)。

利用中間元素的margin值控制兩邊的間距

寬度小于左右部分寬度之和時，右側(cè)部分會被擠下去


    
左側(cè)

    
右側(cè)

    
中間

2 position實現(xiàn) 
基于絕對定位的三欄布局：注意絕對定位的元素脫離文檔流，相對于最近的已經(jīng)定位的祖先元素進行定位。無需考慮HTML中結(jié)構(gòu)的順序

缺點：有頂部對齊問題，需要進行調(diào)整，注意中間的高度為整個內(nèi)容的高度


    
左側(cè)

    
中間

    
右側(cè)

3 float和BFC配合圣杯布局 
必須將中間部分的HTML結(jié)構(gòu)寫在最前面，三個元素均設(shè)置向左浮動。兩側(cè)元素寬度固定，中間設(shè)置為100%；然后利用左側(cè)元素負的margin值進行偏移，覆蓋在中間的寬度之上；右側(cè)的元素同樣利用負的margin值進行覆蓋

存在的問題：不能自適應(yīng)高度


    

        
中間

    

    
左側(cè)

    
右側(cè)

4 flex布局

flexbox布局最簡潔使用，并且沒有明顯缺陷。

僅需將容器設(shè)置為display:flex;，盒內(nèi)元素兩端對其，將中間元素設(shè)置為100%寬度即可填充空白，再利用margin值設(shè)置邊距即可

并且盒內(nèi)元素的高度撐開容器的高度


    
左側(cè)

    
中間

    
右側(cè)

5 總結(jié)

純float的三欄布局需要將中間的內(nèi)容放在最后；

絕對定位的三欄布局：元素對其有點問題

圣杯布局：容器內(nèi)不能撐開高度

flex布局最好，基本沒有大的缺點。

純

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111744.html

相關(guān)文章

  • 常見的面試問題：【CSS】已知高度，寫出三欄布局

    摘要：問題已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應(yīng)回答效果示例解決方案浮動絕對定位彈性布局表格布局網(wǎng)格布局。方案二絕對定位將和的都設(shè)置脫離文檔流，給的設(shè)置左右兩邊距離即左右兩邊盒子的實際寬度。 問題： 已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應(yīng)showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

    MobService 評論0 收藏0

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...

    Amos 評論0 收藏0

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們在里面又加了一個內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現(xiàn)的都...

    Clect 評論0 收藏0

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們在里面又加了一個內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現(xiàn)的都...

    468122151 評論0 收藏0

發(fā)表評論

0條評論

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