三種方法實現CSS三欄布局

gggggggbong 發布于2019-04-23 11:50 / 3305人閱讀

摘要：本文由云社區發表作者前端林子本文會分別介紹三種實現三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動的方法方法一自身浮動的方法實現方法需要左欄向左浮動，右欄向右浮動，中間設左右來撐開距離實現三欄布局中間欄不要設寬度，包括左欄

本文由云+社區發表

作者：前端林子

本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果

1.方法一：自身浮動的方法

實現方法：需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離




    
    CSS實現三欄布局1
    


    
    
    左欄
    右欄
    中間欄

注意：該方法在html布局時，要把中間欄放在左欄、右欄后面，左欄和右欄的順序不定

實現的效果如下：

自身浮動實現三欄布局

2.方法二：margin負值法

實現方法：兩邊兩欄寬度固定，中間欄寬度自適應，左欄、右欄、中間欄向左浮動，左欄的margin-left設為-100%，中間欄的width設為100%，右欄的margin-left設為-右欄寬度




    
    CSS實現三欄布局2
    


    
    中間欄
    左欄
    右欄

注意：該方法在html布局時，要把中間欄放在第一個

此方法是實現圣杯布局和雙飛翼布局的基礎。

實現的效果如下：

margin負值法實現三欄布局

3.方法三：絕對定位法

實現方法：左欄、右欄絕對定位，分別固定到頁面左右兩側，中間欄不設寬度，用左右margin來撐開距離




    
    CSS實現三欄布局3
    


    
    
    左欄
    中間欄
    右欄

實現的效果如下：

此文已由騰訊云+社區在各渠道發布

獲取更多新鮮技術干貨，可以關注我們騰訊云技術社區-云加社區官方號及知乎機構號

云服務器 GPU云服務器三種實現方法三欄布局 html5 三欄布局三種畫線方法java

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

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

三種方法實現CSS三欄布局

摘要：本文由云社區發表作者前端林子本文會分別介紹三種實現三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動的方法實現方法需要左欄向左浮動，右欄向右浮動，中間設左右來撐開距離實現三欄布局中間欄不要設寬度，包括左欄左浮右欄右浮，中間不本文由云+社區發表作者：前端林子本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果 1.方法一：自身浮動的方法實現方法：需要左欄向左浮...

hqman 2019-08-30 15:55 評論0 收藏0
三種方法實現CSS三欄布局

摘要：本文由云社區發表作者前端林子本文會分別介紹三種實現三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動的方法實現方法需要左欄向左浮動，右欄向右浮動，中間設左右來撐開距離實現三欄布局中間欄不要設寬度，包括左欄左浮右欄右浮，中間不本文由云+社區發表作者：前端林子本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果 1.方法一：自身浮動的方法實現方法：需要左欄向左浮...

nodejh 2019-08-23 15:10 評論0 收藏0
三種方法實現CSS三欄布局

摘要：本文由云社區發表作者前端林子本文會分別介紹三種實現三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動的方法實現方法需要左欄向左浮動，右欄向右浮動，中間設左右來撐開距離實現三欄布局中間欄不要設寬度，包括左欄左浮右欄右浮，中間不本文由云+社區發表作者：前端林子本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果 1.方法一：自身浮動的方法實現方法：需要左欄向左浮...

wmui 2019-08-02 14:13 評論0 收藏0
CSS學習筆記(八) 頁面布局之三欄-固定寬度布局

摘要：示例添加這一行規則結果就會變成這樣我們把這種現象稱為浮動滑移，可以使用三種方法來預防發生從設定的元素寬度中減去添加的水平外邊距邊框和內邊距的寬度和。當我們取消勾選該屬性時，欄就會由于欄的推擠產生了浮動滑移，移位到欄下方。 1.布局前的認知 1.1 三種基本方案多欄布局有三種基本的實現方案：固定寬度、流動、彈性。固定寬度。布局的大小不會隨用戶調整瀏覽器窗口大小而變化，一般是 ...

eechen 2019-08-28 18:03 評論0 收藏0
三種方式實現圣杯布局

摘要：本文會用三種方法來實現圣杯布局，分別是浮動，以及。先移動左邊，新加一個樣式。小結總的來說，我認為使用彈性盒子布局實現圣杯模式是最方便最快速且不用擔心移動端的適配問題。圣杯布局的三種實現圣杯布局是一種很常見的css布局。他要求：上部和下部各自占領屏幕所有寬度。上下部之間的部分是一個三欄布局。三欄布局兩側寬度不變，中間部分自動填充整個區域。中間部分的高度是三欄中最高的區域的高...

cgspine 2019-08-30 13:58 評論0 收藏0