如何實現三欄佈局

時間 2019-11-20

標籤如何實現佈局简体版

原文原文鏈接

追根溯源

雙飛翼佈局
來源於淘寶UED的玉伯，致敬~
聖盃佈局【Holy Grail of Layouts】
Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師傳播開來瀏覽器

知識點

margin-left:-100%;
使對象向左移動一段距離，這段距離等於父體的內容寬度，上浮到前面元素的最左邊佈局

步驟

1.浮動,設置main的寬度爲100%;
main中間欄(重要的東西)要在放在文檔流前面以優先渲染學習

<style>
    .main,
    .left,
    .right{
        float: left;
    }
    .main{
        background: #888;
        width: 100%;
    }
    .left,
    .right{
        background: #F65;
        width: 200px;
    }
    .left{
        

    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="main">
           main </div>
        <div class="left">
           left  </div>
        <div class="right">
           right </div>
    </div>
</body>

效果：
code

2.讓left和right與main在一行，須要使用margin-left的負值，此時left和right覆蓋了main的一部分，可是width的寬度不發生改變對象

.left{
        margin-left: -100%;
    }
    .right{
        margin-left: -200px;
    }

3.main部分的內容被覆蓋住了，要如何解決呢？
3.1雙飛翼佈局blog

.content{
        margin-left:  200px;
        margin-right: 200px;
    }

<div class="wrap">
        <div class="main">
            <div class="content">main</div>
        </div>

給main內嵌一個div，把main裏面的內容放在這個div中，並給這個div設置margin屬性就ok啦~
3.2聖盃佈局文檔

.wrap{
    padding-left: 200px;
    padding-right: 200px;
   }

效果：

給最外圍的wrap容器設置padding值以後，其包含的div寬度被壓縮，可是main被定位到了合適的位置，以下圖，在瀏覽器中把left，right元素隱藏以後
it

.left,
    .right{
        background: #F65;
        width: 200px;
        position: relative;
    }
    .left{
        margin-left: -100%;
        left:-200px;
    }
    .right{
        margin-left: -200px;
        right:-200px;
    }

把main定位到了合適的位置，下一步就要解決left，right的位置問題了~
設置left，right爲相對定位，其實相對定位和絕對定位都ok~而後把left和right拉到合適的位置，大功告成！是否是很開心~
最終效果：
io

總結：
聖盃佈局：沒有增長額外的標記，可是設置了較多的屬性值~
雙飛翼佈局：增長了一個div，可是顯得更加輕便簡潔靈活，代碼也比較少~
二者都用到了margin的負值，這個屬性仍是蠻靈活的，要多用
做爲小白，很佩服可以靈活佈局的大大，因此我還要學習學習在學習，理解理解再理解！class

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。