聖盃佈局和雙飛翼佈局

時間 2019-11-16

標籤佈局雙飛简体版

原文原文鏈接

經典三列布局，也叫作聖盃佈局【Holy Grail of Layouts】
Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師傳播開來，它的佈局要求有幾點：css

一、三列布局，中間寬度自適應，兩邊定寬；
二、中間欄要在瀏覽器中優先展現渲染；
三、容許任意列的高度最高；
四、要求只用一個額外的DIV標籤；
五、要求用最簡單的CSS、最少的HACK語句；html

1.聖盃佈局：chrome

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>聖盃佈局</title>
    <style type="text/css">
    body {background-color: #ffffff; font-size:14px;}
    #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}
    .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}
    .main {background-color: #03a9f4; color:#ffffff;}
    .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}
    p {margin:0; padding:20px; text-align: center;}
    
    /* 左側欄固定寬度，右側自適應 */
    .bd-lft {
        zoom:1;
        overflow:hidden;
        padding-left:210px;
    }
    .bd-lft .aside {
        float:left;
        width:200px;
        margin-left:-100%; /*= -100%*/
        position:relative;
        left:-210px; /* = -parantNode.paddingLeft */
        _left: 0; /*IE6 hack*/
    }
    .bd-lft .main {
        float:left;
        width:100%;
    }
    /* 右側欄固定寬度，左側自適應 */
    .bd-rgt {
        zoom:1;
        overflow:hidden;
        padding-right:210px;
    }
    .bd-rgt .aside {
        float:left;
        width:200px;
        margin-left:-200px; /* = -this.width */
        position:relative;
        right:-210px; /* = -parantNode.paddingRight */
    }
    .bd-rgt .main {
        float:left;
        width:100%;
    }
    /* 左中右 三欄自適應 */
    .bd-3-lr {
        zoom:1;
        overflow:hidden;
        padding-left:210px;
        padding-right:210px;
    }
    .bd-3-lr .main {
        float:left;
        width:100%;
    }
    .bd-3-lr .aside-1 {
        float: left;
        width:200px;
        margin-left: -100%;
        position:relative;
        left: -210px;
        _left: 210px; /*IE6 hack*/
    }
    .bd-3-lr .aside-2 {
        float: left;
        width:200px;
        margin-left: -200px;
        position:relative;
        right: -210px;
    }
    /* 都在左邊，右側自適應 */
    .bd-3-ll {
        zoom:1;
        overflow:hidden;
        padding-left:420px;
    }
    .bd-3-ll .main {
        float:left;
        width:100%;
    }
    .bd-3-ll .aside-1 {
        float: left;
        width:200px;
        margin-left: -100%;
        position:relative;
        left: -420px;
        _left: 0px; /*IE6 hack*/
    }
    .bd-3-ll .aside-2 {
        float: left;
        width:200px;
        margin-left: -100%;
        position:relative;
        left: -210px;
        _left: 210px; /*IE6 hack*/
    }
    /* 都在右邊，左側自適應 */
    .bd-3-rr {
        zoom:1;
        overflow:hidden;
        padding-right:420px;
    }
    .bd-3-rr .main {
        float:left;
        width:100%;
    }
    .bd-3-rr .aside-1 {
        float: left;
        width:200px;
        margin-left: -200px;
        position:relative;
        right: -210px;
    }
    .bd-3-rr .aside-2 {
        float: left;
        width:200px;
        margin-left: -200px;
        position:relative;
        right: -420px;
    }
    </style>
</head>
<body>
    <div id="hd">頭部</div>
    <div class="bd-lft">
        <div class="main">
            <p>主內容欄自適應寬度</p>
        </div>
        <div class="aside">
            <p>側邊欄固定寬度</p>
        </div>
    </div>
    <div class="bd-rgt">
        <div class="main">
            <p>主內容欄自適應寬度</p>
        </div>
        <div class="aside">
            <p>側邊欄固定寬度</p>
        </div>
    </div>
    <div class="bd-3-lr">
        <div class="main">
            <p>主內容欄自適應寬度</p>
        </div>
        <div class="aside-1">
            <p>側邊欄1固定寬度</p>
        </div>
        <div class="aside-2">
            <p>側邊欄2固定寬度</p>
        </div>
    </div>
    <div class="bd-3-ll">
        <div class="main">
            <p>主內容欄自適應寬度</p>
        </div>
        <div class="aside-1">
            <p>側邊欄1固定寬度</p>
        </div>
        <div class="aside-2">
            <p>側邊欄2固定寬度</p>
        </div>
    </div>
    <div class="bd-3-rr">
        <div class="main">
            <p>主內容欄自適應寬度</p>
        </div>
        <div class="aside-1">
            <p>側邊欄1固定寬度</p>
        </div>
        <div class="aside-2">
            <p>側邊欄2固定寬度</p>
        </div>
    </div>
    <div id="ft">底部</div>
</body>
</html>

執行效果：瀏覽器

2.雙飛翼佈局ide

在不增長額外標籤的狀況下，聖盃佈局已經很是完美，聖盃佈局使用了相對定位，之後佈局是有侷限性的，並且寬度控制要改的地方也多，那麼有沒其餘方法更加簡潔方便呢？佈局

在淘寶UED探討下，增長多一個div就能夠不用相對佈局了，只用到了浮動和負邊距，這就是咱們所說的雙飛翼佈局。post

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>雙飛翼佈局</title>    
    <style>
        body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .bd{
            /*padding-left:150px;*/
            /*padding-right:190px;*/
        }
        .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-100%;
            /*position: relative;*/
            /*left:-150px;*/
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:-190px;
            /*position:relative;*/
            /*right:-190px;*/
        }
        .inner{
            margin-left:150px;
            margin-right:190px;
        }
    </style>
</head>
<body>
<div class="header">Header</div>
<div class="bd">
    <div class="main">
        <div class="inner">
            Main
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>
</body>
</html>

執行效果：ui

總結：this

1.聖盃佈局，爲了中間div內容不被遮擋，將中間div設置了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div。

2.雙飛翼佈局，爲了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裏用margin-left和margin-right爲左右兩欄div留出位置。
多了1個div，少用大體4個css屬性（聖盃佈局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼佈局子div裏用margin-left和margin-right共2個屬性，6-2=4），我的感受比聖盃佈局思路更直接和簡潔一點。spa

Learn from yesterday, live for today, hope for tomorrow.

相關標籤/搜索

每日一句

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