CSS || 三欄布局，兩邊固定，中間自適應

pcChao 發布于2019-08-29 12:12 / 3485人閱讀

摘要：實現基于純實現的三欄布局需要將中間的內容放在結構的最后，否則右側會沉在中間內容的下側原理元素浮動后，脫離文檔流，后面的元素受浮動影響，設置受影響元素的值即可兩邊固定寬度，中間寬度自適應。

1 float實現

基于純float實現的三欄布局需要將中間的內容放在HTML結構的最后，否則右側會沉在中間內容的下側

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

兩邊固定寬度，中間寬度自適應。

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

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


    左側
    右側
    中間

2 position實現

基于絕對定位的三欄布局：注意絕對定位的元素脫離文檔流，相對于最近的已經定位的祖先元素進行定位。無需考慮HTML中結構的順序

缺點：有頂部對齊問題，需要進行調整，注意中間的高度為整個內容的高度


    左側
    中間
    右側

3 float和BFC配合圣杯布局

必須將中間部分的HTML結構寫在最前面，三個元素均設置向左浮動。兩側元素寬度固定，中間設置為100%；然后利用左側元素負的margin值進行偏移，覆蓋在中間的寬度之上；右側的元素同樣利用負的margin值進行覆蓋

存在的問題：不能自適應高度

4 flex布局

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

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

并且盒內元素的高度撐開容器的高度


    左側
    中間
    右側

5 總結

純float的三欄布局需要將中間的內容放在最后；

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

圣杯布局：容器內不能撐開高度

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

純

云服務器 GPU云服務器 css自適應 css圖片自適應 asp 自適應css 三欄布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111744.html

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

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

MobService 2019-08-02 15:33 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
圣杯布局和雙飛翼布局

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

Clect 2019-08-02 16:17 評論0 收藏0
圣杯布局和雙飛翼布局

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

468122151 2019-08-30 10:49 評論0 收藏0