三欄布局-左右寬固定,中間自適應

abson 發布于2019-08-02 15:11 / 2870人閱讀

摘要：優化方式二圣杯布局優化方式三雙飛翼布局給元素包裹一個容器處理方式二和三解決方式非常類似只是處理的細節不一樣具體用那個都可以一般推薦用前者上面就是實現的幾種方式細心同學應該可以看到這兩種方式左右兩列并不會隨著中間內容區域高度變化而變化。

常用方式羅列

float

absolute

table

flex

grid

float

    
        left
        right
        center

.container {
    overflow: auto;  
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
}
.right {
    width: 200px;
    float: right;
    background-color: #2ECC71;
}
.center {
    margin-left: 200px;
    margin-right: 200px;
    background-color: #3498DB;
}

上面實現方式優點,實現簡單兼容性好

缺點：根據渲染的規則,從上到下,也就是說left和right會優先渲染, center部分會最后渲染.

優化方式-1

利用負margin來完成


    
        center
        center
        center
        center
        center
        center
        center
    
    left
    right

.container {
    overflow: auto;  
}
.left,
.right,
.center {
    box-sizing: border-box;
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
    margin-left: -100%;
}
.right {
    width: 200px;
    float: right;  // float:left;
    background-color: #2ECC71;
    margin-left: -200px;
}
.center {
    float: left;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
    background-color: #3498DB;

}

完成前面主要內容優先加載問題,但是又有新問題,當主體內容過長的時,發現背景(邊框、背景圖等等)影響到了兩側

如果只處理背景問題可以使用下面方式

    .center {
        background-clip:  content-box
    }

如果有邊框、背景圖片等顯然上面不能滿足。

優化方式二 (圣杯布局)


    
        center
        center
        center
        center
        center
        center
        center
    
    left
    right

.container {
    margin:0 200px;
    position: relative;
}
.left,
.right,
.center {
    box-sizing: border-box;
}

.center {
    float: left;
    width: 100%;
    background-color: #3498DB;
}
.left {
    position: relative;
    left:-200px;
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: #1ABC9C;
}

.right {
    position: relative;
    right:-200px;
    float: right;
    width: 200px;
    margin-left: -200px;
    background-color: #2ECC71;
}

優化方式三: (雙飛翼布局) 給 center 元素包裹一個容器

    
        
            
                center
                center
                center
                center
                center
                center
                center
            
        
        left
        right

.container {
    overflow: auto;
}

.left,
.right,
.center,
.center-warpper {
    box-sizing: border-box;
}
.center-warpper {
    float:left;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
}
.center {
    width: 100%;
    overflow: auto;
    background-color: #3498DB;
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
    margin-left: -100%;
}

.right {
    width: 200px;
    float: right;
    background-color: #2ECC71;
    margin-left: -200px;
}

處理方式二和三解決方式非常類似,只是處理的細節不一樣. 具體用那個都可以一般推薦用前者

absolute

 
    
        center
        center
        center
        center
        center
        center
        center
    
    left
    right

.container {
    position: relative;
}

.left,
.right,
.center {
    box-sizing: border-box;
}
.center {
    position: absolute;
    left: 200px;
    right: 200px;
    background-color: #3498DB;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: #1ABC9C;
}
.right {
    position: absolute;
    right: 0;
    float: right;
    width: 200px;
    background-color: #2ECC71;
}

table

     
        left
        
            center
            center
            center
            center
            center
            center
            center
        
        right

.container {
    position: relative;
    display: table;
    width: 100%;
}

.left,
.right,
.center {
    box-sizing: border-box;
    display: table-cell;
}
.center {
    background-color: #3498DB;
}
.left {
    width: 200px;
    background-color: #1ABC9C;
}

.right {
    width: 200px;
    background-color: #2ECC71;
}

flex


    left
    
        center
        center
        center
        center
        center
        center
        center
    
    right

.container {
    position: relative;
    display: flex;
    width: 100%;
}

.left,
.right,
.center {
    box-sizing: border-box;
    display: table-cell;
}

.center {
    background-color: #3498DB;
    flex:1;
}

.left {
    width: 200px;
    background-color: #1ABC9C;
}

.right {
    width: 200px;
    background-color: #2ECC71;
}

Grid

 
    left
    
        center
        center
        center
        center
        center
        center
        center
    
    right

.container {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 200px auto 200px;
}

.left,
.right,
.center {
    box-sizing: border-box;
}

.center {
    background-color: #3498DB;
}

.left {
    background-color: #1ABC9C;
}

.right {
    background-color: #2ECC71;
}

上面就是實現的幾種方式, 細心同學應該可以看到 float、absoulut 這兩種方式左右兩列并不會隨著中間內容區域高度變化而變化。

如果想要創建三列布局中間自適應，且三列都等高的話選擇 table、flex、Grid;

具體兼容可查閱兼容性查看

如果有更好的方式，大家可以在評論區給出; 一起討論學習

GPU云服務器云服務器三欄布局 html5 三欄布局 easyui左右布局固定布局

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

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

三欄布局（一）-------左右寬高固定，中間自適應

摘要：幼圓常見的頁面布局有幼圓左右寬度固定，中間自適應幼圓上下高度固定，中間自適應幼圓左寬度固定，右自適應幼圓上高度固定，下自適應，幼圓下邊是我看過網上的視頻后寫出來的三欄布局左右寬高固定，中間自適應幼圓有種布局方常見的頁面布局有 1、左右寬度固定，中間自適應； 2、上下高度固定，中間自適應； 3、左寬度固定，右自適應； 4、上高度固定，下自適應，下邊是我看過網上的視頻后寫出來的三欄布局-左右寬...

Aldous 2019-04-23 13:08 評論0 收藏0
css三欄布局：左右固定寬中間自適應

摘要：圣杯布局直接上代碼雙飛翼布局自身浮動法絕對定位法圣杯布局直接上代碼：html: css: .middle,.left,.right {float: left;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; } .right {margin-left: -220px; wi...

CoorChice 2019-08-30 15:52 評論0 收藏0
css三欄布局：左右固定寬中間自適應

摘要：圣杯布局直接上代碼雙飛翼布局自身浮動法絕對定位法圣杯布局直接上代碼：html: css: .middle,.left,.right {float: left;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; } .right {margin-left: -220px; wi...

Vicky 2019-08-01 16:14 評論0 收藏0
三欄布局（二）-------上下寬高固定，中間自適應

摘要：上一篇寫的是左右寬高固定，中間自適應，根據上一篇的內容，總結了下上下寬高固定，中間自適應的幾種布局方式，有種布局方式話不多說，直接上代碼。上一篇寫的是左右寬高固定，中間自適應，根據上一篇的內容，總結了下上下寬高固定，中間自適應的幾種布局方式，有4種布局方式：? ?position;? ?flex;? ? table;? ?grid; 話不多說，直接上代碼。 DOCTYPE html> ...

Render 2019-04-23 13:08 評論0 收藏0
三欄布局-左右寬固定,中間自適應

摘要：優化方式二圣杯布局優化方式三雙飛翼布局給元素包裹一個容器處理方式二和三解決方式非常類似只是處理的細節不一樣具體用那個都可以一般推薦用前者上面就是實現的幾種方式細心同學應該可以看到這兩種方式左右兩列并不會隨著中間內容區域高度變化而變化。常用方式羅列 float absolute table flex grid float left righ...

hiYoHoo 2019-08-30 11:01 評論0 收藏0