等高布局常用幾種方式

Allen 發(fā)布于2019-08-30 11:02 / 1971人閱讀

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

等高布局的方式

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

從等高布局實現(xiàn)方式來說,又分為兩類

偽等高

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

真等高

子元素高度相等

先來看看偽等高實現(xiàn)方式

通過負margin和Padding實現(xiàn)

真等高實現(xiàn)方式

table

absoult

flex

grid

偽等高之-負margin和padding

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

    
        left
        
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
        
        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
        
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
        
        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
 
        
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
        
        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
 
    
        我是中間部分的內(nèi)容
        我是中間部分的內(nèi)容
        我是中間部分的內(nèi)容
        我是中間部分的內(nèi)容
    
    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
 
    
        我是中間部分的內(nèi)容
        我是中間部分的內(nèi)容
        我是中間部分的內(nèi)容
        我是中間部分的內(nèi)容
    
    right

真實等高之 - js

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

    
        left
 
        
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
            我是中間部分的內(nèi)容
        
        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";
        }
    });

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

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

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

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

發(fā)表評論

登陸后可評論

0條評論

Allen

男|高級講師

我要關(guān)注我要私信

TA的文章

[黑五]Friendhosting全場VDS主機45折,虛擬主機4折,老用戶續(xù)費9折+送時長

閱讀 3507·2021-11-23 10:13
虛擬主機怎么從PHP改為ASP-如何選擇虛擬主機？

閱讀 877·2021-09-22 16:01
C語言的注釋模式

閱讀 920·2021-09-09 09:33
HostYun：香港大帶寬VPS九折月付18元起,50-100M帶寬

閱讀 646·2021-08-05 09:58
開源：vue2和thinkphp搭建的前后端分離項目

閱讀 1729·2019-08-30 11:14
等高布局常用幾種方式

閱讀 1972·2019-08-30 11:02
JavaScript的幾種循環(huán)方式

閱讀 3280·2019-08-29 16:28
使用juqery-ui完成聯(lián)想查詢功能

閱讀 1495·2019-08-29 16:09

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

等高布局常用幾種方式

相關(guān)文章