四種方法實現 三欄布局(聖杯布局 雙飛翼布局)

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

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

聖杯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 中...