成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

gggggggbong / 3318人閱讀

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

本文由云+社區(qū)發(fā)表

作者：前端林子

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

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

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




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


    
    
    
左欄

    
右欄

    
中間欄

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

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

自身浮動實現(xiàn)三欄布局

2.方法二：margin負值法

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




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


    
    
中間欄

    
左欄

    
右欄

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

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

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

margin負值法實現(xiàn)三欄布局

3.方法三：絕對定位法

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




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


    
    
    
左欄

    
中間欄

    
右欄

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1232.html

相關(guān)文章

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

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

    hqman 評論0 收藏0

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

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

    nodejh 評論0 收藏0

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

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

    wmui 評論0 收藏0

  • CSS學(xué)習(xí)筆記(八) 頁面布局之三欄-固定寬度布局

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

    eechen 評論0 收藏0

  • 三種方式實現(xiàn)圣杯布局

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

    cgspine 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<