等高布局常用幾種方式

Allen 發布于2019-08-30 11:02 / 1933人閱讀

摘要：等高布局的方式指在同一個父容器中子元素高度相等的布局從等高布局實現方式來說又分為兩類偽等高子元素高度差依然存在只是視覺上給人感覺就是等高真等高子元素高度相等先來看看偽等高實現方式通過負和實現真等高實現方式偽等高之負和主要利用負來實現具體負

等高布局的方式

指在同一個父容器中,子元素高度相等的布局.

從等高布局實現方式來說,又分為兩類

偽等高

子元素高度差依然存在,只是視覺上給人感覺就是等高.

真等高

子元素高度相等

先來看看偽等高實現方式

通過負margin和Padding實現

真等高實現方式

table

absoult

flex

grid

偽等高之-負margin和padding

主要利用負margin來實現, 具體負margin實現可以參考下這篇文章

    
        left
        
            我是中間部分的內容
            我是中間部分的內容
            我是中間部分的內容
            我是中間部分的內容
        
        right
        11111111111

.parent{
    position: relative;
    overflow:hidden;
    color: #efefef;
}
.center,
.left,
.right {
    box-sizing: border-box;
    float: left;
}
.center {
    background-color: #2ECC71;
    width: 60%;
}

.left {
    width: 20%;
    background-color: #1ABC9C;
}
.right {
    width: 20%;
    background-color: #3498DB;
}
.left,
.right,
.center  {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

真實等高之 - table布局

    
        left
        
            我是中間部分的內容
            我是中間部分的內容
            我是中間部分的內容
            我是中間部分的內容
        
        right
        11111111111

    .parent{
        position: relative;
        display: table;
        color: #efefef;
    }
    .center,
    .left,
    .right {
        box-sizing: border-box;
        display: table-cell
    }
    .center {
        background-color: #2ECC71;
        width: 60%;
    }

    .left {
        width: 20%;
        background-color: #1ABC9C;
    }
    .right {
        width: 20%;
        background-color: #3498DB;
    }

真實等高之 - absolute

    
        left
 
        
            我是中間部分的內容
            我是中間部分的內容
            我是中間部分的內容
            我是中間部分的內容
        
        right

   .parent{
        position: absolute;
        color: #efefef;
        width:100%;
        height: 200px;
    }

    .left,
    .right,
    .center {
        position: absolute;
        box-sizing: border-box;
        top:0;
        bottom:0;
    }
    .center {
        background-color: #2ECC71;
        left: 200px;
        right: 300px;
    }

    .left {
        width: 200px;
        background-color: #1ABC9C;
    }
    .right {
        right:0;
        width: 300px;
        background-color: #3498DB;
    }

真實等高之 - flex

.parent{
    display: flex;
    color: #efefef;
    width:100%;
    height: 200px;
}

.left,
.right,
.center {
    box-sizing: border-box;
    flex: 1;
}
.center {
    background-color: #2ECC71;
}
.left {
    background-color: #1ABC9C;
}
.right {
    background-color: #3498DB;
}


    left
 
    
        我是中間部分的內容
        我是中間部分的內容
        我是中間部分的內容
        我是中間部分的內容
    
    right

真實等高之 - grid

    .parent{
        display: grid;
        color: #efefef;
        width:100%;
        height: 200px;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .left,
    .right,
    .center {
        box-sizing: border-box;
    }
    .center {
        background-color: #2ECC71;
    }
    .left {
        background-color: #1ABC9C;
    }
    .right {
        background-color: #3498DB;
    }


    left
 
    
        我是中間部分的內容
        我是中間部分的內容
        我是中間部分的內容
        我是中間部分的內容
    
    right

真實等高之 - js

獲取所有元素中最高列,然后再去比對再進行修改

    
        left
 
        
            我是中間部分的內容
            我是中間部分的內容
            我是中間部分的內容
            我是中間部分的內容
        
        right

    .parent{
        overflow: auto;
        color: #efefef;
    }
    .left,
    .right,
    .center {
        float: left;
    }
    .center {
        width: 60%;
        background-color: #2ECC71;
    }
    .left {
        width: 20%;
        background-color: #1ABC9C;
    }
    .right {
        width: 20%;
        background-color: #3498DB;
    }

     // 獲取最高元素的高度
    var nodeList = document.querySelectorAll(".parent > div");
    var arr = [].slice.call(nodeList,0);
    var maxHeight = arr.map(function(item){
        return item.offsetHeight
    }).sort(function(a, b){
        return a - b;
    }).pop();
    arr.map(function(item){
        if(item.offsetHeight < maxHeight) {
            item.style.height = maxHeight + "px";
        }
    });

日常使用過程的總結,有不足地方歡迎大家指出.

GPU云服務器云服務器幾種方式服務器托管方式有幾種 js繼承的幾種方式 java線程池幾種方式

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

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

等高布局常用幾種方式

摘要：等高布局的方式指在同一個父容器中子元素高度相等的布局從等高布局實現方式來說又分為兩類偽等高子元素高度差依然存在只是視覺上給人感覺就是等高真等高子元素高度相等先來看看偽等高實現方式通過負和實現真等高實現方式偽等高之負和主要利用負來實現具體負等高布局的方式指在同一個父容器中,子元素高度相等的布局. 從等高布局實現方式來說,又分為兩類偽等高子元素高度差依然存在,只是視覺上給人感覺就是...

ymyang 2019-08-23 17:54 評論0 收藏0
結合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...

xuhong 2019-08-28 18:31 評論0 收藏0
結合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...

cnTomato 2019-08-01 15:01 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0