聖盃佈局和雙飛翼佈局的理解和區別, 並用代碼實現

時間 2019-11-29

標籤佈局雙飛理解區別並用代碼實現简体版

原文原文鏈接

做用:
聖盃佈局和雙飛翼佈局解決的問題都是同樣的, 就是兩邊定寬,中間自適應的三欄佈局.中間欄要放在文檔流前面有線渲染.
區別:
聖盃佈局: 爲了中間的內容不被遮擋,將中間的 div 設置了左右padding-left 和 padding-right 後,將左右兩個 div 用相對佈局position:relative並配合 left 和 right 屬性,以便左右兩欄 div 移動後不會遮擋住中間的 div.
雙飛翼佈局: 爲了中間內容不被遮擋,直接在中間內部 div 建立子 div用於放置內容,在改 div 使用margin-left 和 margin-right爲左右兩個 div 留出位置.css

/**聖盃佈局代碼**/
<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <div id="hd">
            Header
        </div>
        <div id="bd">
            <div id="middle">
                middle
            </div>
            <div id="left">
                left
            </div>
            <div id="right">
                right
            </div>
        </div>
    </body>
 </html>
 <style type="text/css">
    #hd{
        height: 50px;
        background: #666;
        text-align: center;
    }
    #bd{
         /*左右欄經過添加負的margin放到正確的位置了，此段代碼是爲了擺正中間欄的位置*/
        padding:0 200px 0 180px;
        height:100px;
    }
    #middle{
        float: left;
        width: 100%;
        height: 100px;
        background: blue;
    }
    #left{
        float: left;
        width: 180px;
        height: 100px;
        margin-left: -100%;
        background: #0c9;
        /*中間欄的位置擺正以後，左欄的位置也相應右移，經過相對定位的left恢復到正確位置*/
        position:relative;
        left:-180px;
    }
    #right{
        float: left;
        width: 200px;
        height: 100px;
        margin-left: -200px;
        background: #0c9;
        position: relative;
        right: -200px;
    }
 </style>

/**雙飛翼佈局**/

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <div id="hd">
            header
        </div>
        <div id="md">
            <div id="inside">
                middle
            </div>
        </div>
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
        <div id="footer">
            
        </div>
    </body>
 </html>
 <style type="text/css">
    #hd{
        height: 50px;
        background: #666;
        text-align: center;
    }
    #md{
        float:left;
        width:100%;/*左欄上去到第一行*/     
        height:100px;
        background:blue;
    }
    #left{
        float:left;
        width:180px;
        height:100px;
        margin-left:-100%;
        background:#0c9;
    }
    #right{
        float:left;
        width:200px;
        height:100px;
        margin-left:-200px;
        background:#0c9;
    }
    /*給內部div添加margin，把內容放到中間欄，其實整個背景仍是100%*/ 
    #inside{
        margin:0 200px 0 180px;
        height:100px;
    }
    #footer{  
       clear:both; /*記得清楚浮動*/  
       height:50px;     
       background: #666;    
       text-align: center; 
    } 
 </style>

[注:] 這些題目以及答案都是在網上找的,我的認爲解答的比較好的 . 出自 https://github.com/haizlin/fe-interview 特此說明html