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

資訊專欄INFORMATION COLUMN

等高布局常用幾種方式

ymyang / 3512人閱讀

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

等高布局的方式 
指在同一個(gè)父容器中,子元素高度相等的布局.
從等高布局實(shí)現(xiàn)方式來(lái)說(shuō),又分為兩類

偽等高

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

真等高

子元素高度相等

先來(lái)看看偽等高實(shí)現(xiàn)方式

通過(guò)負(fù)margin和Padding實(shí)現(xiàn)

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

table

absoult

flex

grid

js

偽等高之-負(fù)margin和padding

主要利用負(fù)margin來(lái)實(shí)現(xiàn), 具體 負(fù)margin實(shí)現(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;
}
真實(shí)等高之 - 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;
    }
真實(shí)等高之 - 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;
    }
真實(shí)等高之 - 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
真實(shí)等高之 - 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
真實(shí)等高之 - js 
獲取所有元素中最高列,然后再去比對(duì)再進(jìn)行修改
    

        
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";
        }
    });

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

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

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

相關(guān)文章

  • 等高布局常用幾種方式

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

    Allen 評(píng)論0 收藏0

  • 結(jié)合CSS3的布局新特征談?wù)劤Ｒ?em>布局方法

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

    xuhong 評(píng)論0 收藏0

  • 結(jié)合CSS3的布局新特征談?wù)劤Ｒ?em>布局方法

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

    cnTomato 評(píng)論0 收藏0

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問(wèn)題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

    FuisonDesign 評(píng)論0 收藏0

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問(wèn)題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

    andot 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

ymyang

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<