四種方法實現 三欄布局（聖杯布局 雙飛翼布局）

2021-09-12 16:40:30 字數 652 閱讀 2774

聖杯布局、雙飛翼布局,本質上都是三欄布局──中間自適應兩邊固定寬。有一次面試，要求寫出三種實現方式，結果只寫出了兩種，面試官說基礎還不夠紮實~嗚

聖杯html結構：

中間的


左邊的右邊的
雙飛翼html結構為：

中間的


左邊的右邊的
說明：網上還有人用padding替換margin的方法，感興趣的自己去查。
說明：網上有人提到這個方法在某些情況下會出現bug，具體沒有深入了解過。
說明：低版本的瀏覽器有相容的問題，在網上也看到有人用order控制位置
說明：grid-column一共分為5個格，「grid-column:1/2」佔了第乙個和第二個格，不是指佔了二分之一。這個方法相容性有比較大的問題，網上有不少文章提到瀏覽器還沒有提供支援，實際上新版主流瀏覽器已經支援了。

四種方法實現 三欄布局（聖杯布局 雙飛翼布局）

聖杯布局 雙飛翼布局,本質上都是三欄布局 中間自適應兩邊固定寬。有一次面試，要求寫出三種實現方式，結果只寫出了兩種，面試官說基礎還不夠紮實 嗚 聖杯html結構 中間的 左邊的右邊的 雙飛翼html結構為 中間的 左邊的右邊的 說明 網上還有人用padding替換margin的方法，感興趣的自己去查...

四種方法實現 三欄布局（聖杯布局 雙飛翼布局）

聖杯布局 雙飛翼布局,本質上都是三欄布局 中間自適應兩邊固定寬。有一次面試，要求寫出三種實現方式，結果只寫出了兩種，面試官說基礎還不夠紮實 嗚 聖杯html結構 中間的 左邊的右邊的 雙飛翼html結構為 中間的 左邊的右邊的 說明 網上還有人用padding替換margin的方法，感興趣的自己去查...

三欄布局的四種方法

1 絕對定位法 該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。html left main right css 簡單的進行css reset body,html 左右絕對定位 left,right left right 中...