亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

兩列自適應(yīng)布局方案整理

starsfun / 2747人閱讀

摘要：前提本文討論的是兩列自適應(yīng)布局左列定寬不定寬，右列自適應(yīng)。左列不定寬，右列自適應(yīng)形成的間隔通過(guò)設(shè)置來(lái)觸發(fā)特性這個(gè)方法主要是應(yīng)用到的一個(gè)特性浮動(dòng)元素的塊狀兄弟元素會(huì)無(wú)視浮動(dòng)元素的位置，盡量占滿(mǎn)一整行，這樣該兄弟元素就會(huì)被浮動(dòng)元素覆蓋。

前提

本文討論的是兩列自適應(yīng)布局：左列定寬/不定寬，右列自適應(yīng)。

雖然分這兩種情況，但實(shí)際上不定寬的方案同樣適用于定寬的場(chǎng)景，因此不定寬的方案泛用度更高。

左列定寬，右列自適應(yīng) margin + float 

    
left

    

        

            
right
right

        

    


    .left{
        float: left;     //向左浮動(dòng)
        width: 100px;    //固定寬度
        position: relative;//由于.left與.right-fix重合，且.right-fix在DOM樹(shù)上的位置比.left要后，因此.right-fix會(huì)遮擋住.left，設(shè)置.left為relative可以讓其冒出來(lái)。
    }
    .right-fix{
        float: right;     //向右浮動(dòng)
        width: 100%;    //為了自適應(yīng)設(shè)為100%
        margin-left: -100px;//由于寬度設(shè)為100%，.right-fix遭到瀏覽器換行處理；因此通過(guò)設(shè)置負(fù)的margin值，在左側(cè)制造出100px的空白，使.right-fix與.left重合（即處于同一行）
    }
    .right{
        margin-left: 120px;    //由于.left和.right-fix重合了，因此給.right設(shè)置一個(gè)margin-left，避免內(nèi)容區(qū)（.right）與.left重合。另外，120px - 100px = 多出來(lái)的20px實(shí)際上就相當(dāng)于.left和.right之間的間隔了。
    }

這個(gè)方法其實(shí)已經(jīng)是兼顧到低版本IE的完善版本了，缺點(diǎn)是代碼冗長(zhǎng)，而且有兩個(gè)關(guān)鍵知識(shí)點(diǎn)比較難理解：

給.left加上position:relative;怎么就能讓.left冒出來(lái)而不受.right-fix的遮擋了呢？

.right-fix設(shè)置負(fù)的margin-left，怎么就能使.left與.right-fix重合了呢？

再者，這個(gè)方案由于.right-fix的margin-left和.left的width高度耦合，因此無(wú)法實(shí)現(xiàn)自適應(yīng)，只能應(yīng)用在左列（當(dāng)然右列也成）固定寬度的場(chǎng)景。

absolute 

    

        
left

    

    

        
right

        
right

    


.parent{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
    width: 100px;
}
.right{
    position: absolute;
    left: 120px;    //比.left的left多出20px，相當(dāng)于間隔
    right: 0;
}

這種方法是通過(guò)absolute配合left/right進(jìn)行布局：

設(shè)置display: absolute后，通過(guò)top/right/bottom/left可以實(shí)現(xiàn)對(duì)元素的位置進(jìn)行像素級(jí)的任意控制。因此，使用left屬性即可控制各元素的起始位置，避免重疊。

自適應(yīng)的關(guān)鍵在于left和right屬性，在對(duì)元素同時(shí)設(shè)置這兩個(gè)屬性后，元素的寬度便會(huì)遭到拉伸，實(shí)現(xiàn)自適應(yīng)。

需要注意的是父級(jí)元素需要設(shè)置display: relative。

這種方案很容易理解，但缺點(diǎn)就是不能做到“不定寬”，因?yàn)?left和.right的left屬性的值高度相關(guān)。

左列不定寬，右列自適應(yīng) float + BFC 

    

        
left

    

    

        
right

        
right

    


.left{
    float: left;
    width: 100px;
    margin-right: 20px;    //形成20px的間隔
}
.right{
    overflow: hidden; //通過(guò)設(shè)置overflow: hidden來(lái)觸發(fā)BFC特性
}

這個(gè)方法主要是應(yīng)用到BFC的一個(gè)特性：

浮動(dòng)元素的塊狀兄弟元素會(huì)無(wú)視浮動(dòng)元素的位置，盡量占滿(mǎn)一整行，這樣該兄弟元素就會(huì)被浮動(dòng)元素覆蓋。

若浮動(dòng)元素的塊狀兄弟元素為BFC，則不會(huì)占滿(mǎn)一整行，而是根據(jù)浮動(dòng)元素的寬度，占據(jù)該行剩下的寬度，避免與浮動(dòng)元素重疊。

浮動(dòng)元素與其塊狀BFC兄弟元素之間的margin可以生效，這將繼續(xù)減少兄弟元素的寬度。

并不是一定要在.right上用overflow: hidden;，只要能觸發(fā)BFC就好了，另外在IE6上也可以觸發(fā)haslayout特性（推薦用*zoom: 1;）。
由于.right的寬度是自動(dòng)計(jì)算的，不需要設(shè)置任何與.left寬度相關(guān)的css，因此.left的寬度可以不固定（由內(nèi)容盒子決定）。

table布局 

    

        
left

    

    

        
right

        
right

    


.parent{
    display: table; width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

這個(gè)方法是表格布局的典型運(yùn)用。說(shuō)真的，我也很迷惘要不要使用表格布局，畢竟已經(jīng)是上個(gè)時(shí)代的產(chǎn)物了，雖然已經(jīng)不再用

的HTML結(jié)構(gòu)了，但用上相應(yīng)的CSS其實(shí)思路跟以前是變化不大的。
這個(gè)方法主要是利用了表格(table)的寬度必然等于其所有單元格(table-cell)加起來(lái)的總寬度，那么只要表格的寬度一定，其中一個(gè)（或幾個(gè)）單元格的寬度也一定，那么另外一個(gè)未設(shè)置寬度的單元格則會(huì)默認(rèn)占滿(mǎn)剩下的寬度，即實(shí)現(xiàn)自適應(yīng)。

flex

    

        
left

    

    

        
right

        
right

    


.parent{
    display: flex;
}
.left{
    margin-right: 20px;
}
.right{
    flex: 1;
}
.left p{width: 200px;}

flex布局的自適應(yīng)我就不多說(shuō)了，本來(lái)就是設(shè)計(jì)來(lái)自適應(yīng)的，只需要用上flex: 1;，就能讓.right分到.parent的寬度減去.left的寬度。

推薦使用

我個(gè)人是比較推薦用float + BFC方案，瀏覽器兼容性很好，代碼量也少，另外也很好理解；移動(dòng)端上也可以考慮用上flex方案，不過(guò)還是那一句，注意用舊版的flex，兼容性會(huì)好一點(diǎn)。

擴(kuò)展

說(shuō)是說(shuō)“兩列自適應(yīng)布局”，實(shí)際上，只要滿(mǎn)足“只有一列是自適應(yīng)”這一條件，多少列布局都行。

參考文章

《The Definitive Guide to Using Negative Margins》

《前端精選文摘：BFC 神奇背后的原理》

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

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

相關(guān)文章

  • 多列布局方案整理

    摘要：了解中屬性的值及其特性，透徹分析問(wèn)題和需求才可以選擇和設(shè)計(jì)最適合的布局解決方案。多列布局在網(wǎng)頁(yè)中非常常見(jiàn)例如兩列布局，多列布局可以是兩列定寬，一列自適應(yīng)，或者多列不定寬一列自適應(yīng)還有等分布局等。 了解 CSS 中屬性的值及其特性， 透徹分析問(wèn)題和需求才可以選擇和設(shè)計(jì)最適合的布局解決方案。 多列布局在網(wǎng)頁(yè)中非常常見(jiàn)（例如兩列布局），多列布局可以是兩列定寬，一列自適應(yīng)， 或者多列不定寬一列...

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

  • 多列布局方案整理

    摘要：了解中屬性的值及其特性，透徹分析問(wèn)題和需求才可以選擇和設(shè)計(jì)最適合的布局解決方案。多列布局在網(wǎng)頁(yè)中非常常見(jiàn)例如兩列布局，多列布局可以是兩列定寬，一列自適應(yīng)，或者多列不定寬一列自適應(yīng)還有等分布局等。 了解 CSS 中屬性的值及其特性， 透徹分析問(wèn)題和需求才可以選擇和設(shè)計(jì)最適合的布局解決方案。 多列布局在網(wǎng)頁(yè)中非常常見(jiàn)（例如兩列布局），多列布局可以是兩列定寬，一列自適應(yīng)， 或者多列不定寬一列...

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

  • 前端面試重點(diǎn)之——多列布局

    摘要：重點(diǎn)以需求為例說(shuō)明。三左邊不定寬，右邊自適應(yīng)布局需求左側(cè)不定寬，右側(cè)自適應(yīng)，間距。五等寬布局解決方案需求多列等寬，并保留間距。 在頁(yè)面開(kāi)發(fā)中，當(dāng)我們拿到設(shè)計(jì)師給出的UI圖后，首先考慮的就是布局問(wèn)題，而多列布局會(huì)是我們碰到最多的布局問(wèn)題，個(gè)人就匯總了開(kāi)發(fā)中常見(jiàn)多列布局問(wèn)題的解決方法。按列數(shù)可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類(lèi)似之處。 目錄 一、定寬+...

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

  • 前端面試重點(diǎn)之——多列布局

    摘要：重點(diǎn)以需求為例說(shuō)明。三左邊不定寬，右邊自適應(yīng)布局需求左側(cè)不定寬，右側(cè)自適應(yīng)，間距。五等寬布局解決方案需求多列等寬，并保留間距。 在頁(yè)面開(kāi)發(fā)中，當(dāng)我們拿到設(shè)計(jì)師給出的UI圖后，首先考慮的就是布局問(wèn)題，而多列布局會(huì)是我們碰到最多的布局問(wèn)題，個(gè)人就匯總了開(kāi)發(fā)中常見(jiàn)多列布局問(wèn)題的解決方法。按列數(shù)可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類(lèi)似之處。 目錄 一、定寬+...

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

  • 前端面試重點(diǎn)之——多列布局

    摘要：重點(diǎn)以需求為例說(shuō)明。三左邊不定寬，右邊自適應(yīng)布局需求左側(cè)不定寬，右側(cè)自適應(yīng)，間距。五等寬布局解決方案需求多列等寬，并保留間距。 在頁(yè)面開(kāi)發(fā)中，當(dāng)我們拿到設(shè)計(jì)師給出的UI圖后，首先考慮的就是布局問(wèn)題，而多列布局會(huì)是我們碰到最多的布局問(wèn)題，個(gè)人就匯總了開(kāi)發(fā)中常見(jiàn)多列布局問(wèn)題的解決方法。按列數(shù)可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類(lèi)似之處。 目錄 一、定寬+...

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

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

0條評(píng)論

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