国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Scorpion / 1093人閱讀

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

常用方式羅列

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;

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

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

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

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

相關文章

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

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

    Aldous 評論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 評論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 評論0 收藏0

  • 三欄布局（二）-------上下寬高固定，中間自適應

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

    Render 評論0 收藏0

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

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

    hiYoHoo 評論0 收藏0

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

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

    abson 評論0 收藏0

發表評論

0條評論

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