三欄布局的實現方式

2021-10-08 10:52:45 字數 1234 閱讀 8782

1. 使用浮動float實現

"cotainer"

>

"left"

>

"right"

>

"center"

>

2. 使用position,父級div設定position:relative,三個子級div設定position:absolute,這個要計算好盒子的寬度和間隔去設定位置,相容性比較好

"container"

>

"left"

>

"center"

>

"right"

>

3. 使用flex實現,flex的相容性不是很好

"container"

>

"left"

>

"center"

>

"right"

>

4. 使用table實現,這種方法相容性好,適用於高度寬度未知的情況,但是margin失效,設計間隔比較麻煩

"container"

>

"left"

>

"center"

>

"right"

>

5. 使用grid網格布局實現

"container"

>

"left"

>

"center"

>

"right"

>

使用float+overflow,這裡兩個盒子浮動,另乙個盒子觸發bfc達到自適應;此方法使得右邊列自適應

"container"

>

"left"

>

"center"

>

"right"

>

以上幾種方法實現的三列布局基本上都是將整個螢幕的寬度鋪滿,並且列與列之間沒有距離,如有需要,自行新增。

三欄布局的方式

攀登,到達乙個你們心中遙不可及的高度。class layout float type text css layout left layout right layout center style class left right center class left div class right di...

實現三欄布局的8種方式

三欄布局 兩側寬度固定,中間寬度自適應的 左右模組各自向左右浮動,並設定中間模組的 margin 值使中間模組寬度自適應 left right main main left right left main right left main right left main right left main...

三欄布局的幾種方式

這裡介紹幾種三欄布局的實現方式,最終目的都是左右兩邊固定寬度,中間的自適應。最終效果如下 一 流式布局 en class wrap class left class right class main 優點 這是比較正常的思路,兩邊浮動,中間利用margin。缺點 主題部分不能優先載入,體驗不好。2 ...