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

資訊專欄INFORMATION COLUMN

圣杯布局和雙飛翼布局

yankeys / 1200人閱讀

摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。

解決的問題

圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。

圣杯布局

圣杯布局dom結構：

    

        
圣杯布局

        

            

                1.這是三欄布局的圣杯布局解決方案； 
                2.這是三欄布局的圣杯布局解決方案； 
                3.這是三欄布局的圣杯布局解決方案； 
                4.這是三欄布局的圣杯布局解決方案； 
                5.這是三欄布局的圣杯布局解決方案； 
                6.這是三欄布局的圣杯布局解決方案； 
                7.這是三欄布局的圣杯布局解決方案； 
                8.這是三欄布局的圣杯布局解決方案；
                9.這是三欄布局的圣杯布局解決方案；

1.首先讓三個列都向左浮動：

    .layout.grail .left-center-right>div {
        float: left;
    }

2.把左右兩個列提到和中間列同行（margin作用的相關解釋：http://www.cnblogs.com/2050/a...）：

        .layout.grail .left {
            margin-left: -100%;
        }
        .layout.grail .right {
            margin-left: -300px;
        }

3.上面中間列被遮擋了，這時在這三列的父元素上加padding值（疑問：為什么這里不用margin呢？試了下效果也可以的~）：

    .layout.grail .left-center-right {
        padding: 0 300px;
    }

4.這時左右兩列也跑上來了，通過絕對定位relative讓它們回到正確的位置：

    .layout.grail .left {
        position: relative;
        left: -300px;
    }
    .layout.grail .right {
        position: relative;
        right: -300px;
    }

此時效果已經完成了，只是在窗口變小到限定值時布局會亂掉，那么給它加上一個寬度限制：

    .layout.grail .left-center-right {
        min-width: 304px;
    }

完整的CSS代碼如下：
雙飛翼布局

雙飛翼dom結構：

    

        
雙飛翼布局

        

            

                

                    1.這是三欄布局的雙飛翼布局解決方案； 
                    2.這是三欄布局的雙飛翼布局解決方案； 
                    3.這是三欄布局的雙飛翼布局解決方案； 
                    4.這是三欄布局的雙飛翼布局解決方案； 
                    5.這是三欄布局的雙飛翼布局解決方案； 
                    6.這是三欄布局的雙飛翼布局解決方案； 
                    7.這是三欄布局的雙飛翼布局解決方案； 
                    8.這是三欄布局的雙飛翼布局解決方案；
                    9.這是三欄布局的雙飛翼布局解決方案；

圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div并排，以形成三欄布局：

    .layout.ued .left-center-right>div {
        float: left;
    }
    .layout.ued .center {
        background: yellow;
    }
    .layout.ued .left {
        margin-left: -100%;
    }
    .layout.ued .right {
        margin-left: -300px;
    }

不同在于解決”中間欄div內容不被遮擋“問題的思路不一樣：圣杯布局為了中間div內容不被遮擋，將父容器設置了左右padding-left和padding-right后，將左右兩個div用相對布局position: relative并分別配合right和left屬性，以便左右兩欄div移動后不遮擋中間div；而雙飛翼布局為了中間div內容不被遮擋，直接在中間div內部創建子div用于放置內容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。

    .layout.ued .wrap {
        margin-left: 300px;
        margin-right: 300px;
    }

完整的CSS代碼：

轉載鏈接：https://www.zhihu.com/questio...

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

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

相關文章

  • CSS布局--圣杯布局和雙飛翼布局以及使用Flex實現圣杯布局

    摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應，其中某部分內容比其他內容高的時候，保證三者元素等高。雙飛翼用在外層多加了一個然后改用。 前言 我曾一度覺得總寫css的前端很low，有了這種思想以后我便遠離網頁布局，H5的工作更不想接，沉迷于頁面邏輯和封裝組件。直到最近我面試，面試官說我css3理解的不熟，我起初很不屑，但后來靜...

    zqhxuyuan 評論0 收藏0

  • 兩招搞定三欄布局——圣杯布局、雙飛翼布局

    摘要：如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局這是一道經典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過設置的左右來實現的。 如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

    Kaede 評論0 收藏0

  • 圣杯布局和雙飛翼布局

    摘要：參考文章同學的關于圣杯布局，圣杯布局和雙飛翼布局的區別經典布局圣杯布局實現的效果主要在中，和固定寬度，首先渲染，且自適應寬度。 ps: 參考文章 DotHide同學的關于圣杯布局，圣杯布局和雙飛翼布局的區別 經典布局 圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

    ZweiZhao 評論0 收藏0

  • 淺談面試中常考的兩種經典布局——圣杯與雙飛翼

    摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內容部分為兩邊騰開位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結過...

    SwordFly 評論0 收藏0

  • 淺談面試中常考的兩種經典布局——圣杯與雙飛翼

    摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內容部分為兩邊騰開位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結過...

    劉厚水 評論0 收藏0

發表評論

0條評論

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