三種方法實(shí)現(xiàn)CSS三欄布局

hqman 發(fā)布于2019-08-30 15:55 / 563人閱讀

摘要：本文由云社區(qū)發(fā)表作者前端林子本文會(huì)分別介紹三種實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動(dòng)的方法實(shí)現(xiàn)方法需要左欄向左浮動(dòng)，右欄向右浮動(dòng)，中間設(shè)左右來撐開距離實(shí)現(xiàn)三欄布局中間欄不要設(shè)寬度，包括左欄左浮右欄右浮，中間不

本文由云+社區(qū)發(fā)表作者：前端林子

本文會(huì)分別介紹三種CSS實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開查看效果

1.方法一：自身浮動(dòng)的方法

實(shí)現(xiàn)方法：需要左欄向左浮動(dòng)，右欄向右浮動(dòng)，中間設(shè)左右margin來撐開距離




    
    CSS實(shí)現(xiàn)三欄布局1
    


    
    
    左欄
    右欄
    中間欄

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

實(shí)現(xiàn)的效果如下：

自身浮動(dòng)實(shí)現(xiàn)三欄布局

2.方法二：margin負(fù)值法

實(shí)現(xiàn)方法：兩邊兩欄寬度固定，中間欄寬度自適應(yīng)，左欄、右欄、中間欄向左浮動(dòng)，左欄的margin-left設(shè)為-100%，中間欄的width設(shè)為100%，右欄的margin-left設(shè)為-右欄寬度




    
    CSS實(shí)現(xiàn)三欄布局2
    


    
    中間欄
    左欄
    右欄

注意：該方法在html布局時(shí)，要把中間欄放在第一個(gè)

此方法是實(shí)現(xiàn)圣杯布局和雙飛翼布局的基礎(chǔ)。

實(shí)現(xiàn)的效果如下：

margin負(fù)值法實(shí)現(xiàn)三欄布局

3.方法三：絕對(duì)定位法

實(shí)現(xiàn)方法：左欄、右欄絕對(duì)定位，分別固定到頁面左右兩側(cè)，中間欄不設(shè)寬度，用左右margin來撐開距離




    
    CSS實(shí)現(xiàn)三欄布局3
    


    
    
    左欄
    中間欄
    右欄

實(shí)現(xiàn)的效果如下：

此文已由騰訊云+社區(qū)在各渠道發(fā)布

獲取更多新鮮技術(shù)干貨，可以關(guān)注我們騰訊云技術(shù)社區(qū)-云加社區(qū)官方號(hào)及知乎機(jī)構(gòu)號(hào)

云服務(wù)器 GPU云服務(wù)器三種實(shí)現(xiàn)方法三欄布局 html5 三欄布局三種畫線方法java

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117352.html

相關(guān)文章

三種方法實(shí)現(xiàn)CSS三欄布局

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

nodejh 2019-08-23 15:10 評(píng)論0 收藏0
三種方法實(shí)現(xiàn)CSS三欄布局

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

wmui 2019-08-02 14:13 評(píng)論0 收藏0
三種方法實(shí)現(xiàn)CSS三欄布局

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

gggggggbong 2019-04-23 11:50 評(píng)論0 收藏0
CSS學(xué)習(xí)筆記(八) 頁面布局之三欄-固定寬度布局

摘要：示例添加這一行規(guī)則結(jié)果就會(huì)變成這樣我們把這種現(xiàn)象稱為浮動(dòng)滑移，可以使用三種方法來預(yù)防發(fā)生從設(shè)定的元素寬度中減去添加的水平外邊距邊框和內(nèi)邊距的寬度和。當(dāng)我們?nèi)∠催x該屬性時(shí)，欄就會(huì)由于欄的推擠產(chǎn)生了浮動(dòng)滑移，移位到欄下方。 1.布局前的認(rèn)知 1.1 三種基本方案多欄布局有三種基本的實(shí)現(xiàn)方案：固定寬度、流動(dòng)、彈性。固定寬度。布局的大小不會(huì)隨用戶調(diào)整瀏覽器窗口大小而變化，一般是 ...

eechen 2019-08-28 18:03 評(píng)論0 收藏0
三種方式實(shí)現(xiàn)圣杯布局

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

cgspine 2019-08-30 13:58 評(píng)論0 收藏0