css佈局之雙飛翼佈局

時間 2019-11-13

標籤 css 佈局雙飛欄目 CSS 简体版

原文原文鏈接

上一節詳細的分析了聖盃佈局，雙飛翼佈局從效果上來說，實現了和聖盃佈局相同的功能。是國內對聖盃佈局的改進版。css

————————————————————————————————————————————————————————————————————————————————————————————碎碎念。html

雙飛翼佈局相比於聖盃佈局要簡單不少，就三列布局來講，經過在內容div元素內部，再加一個div來放置內容，並給這個新加的div設置左右合適的外邊距。（即添加一個元素+兩個屬性）ide

免去了設置內容div的父元素的左右內邊距，左右側邊欄的相對定位，左右側邊欄的相位位移。（六個屬性）佈局

總的來講就是添加了一個元素兩個屬性，去除了六個屬性，可是在思路上確實簡單了不少。spa

下面來看具體的實現：3d

詳細代碼：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聖盃佈局的幾種實現方式</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        body{
            min-width: 600px;
            color:#fff;
        }

        .header,
        .footer{
            text-align: center;
            background-color: #ab96c5;
        }

        .layout1,
        .layout2,
        .layout3,
        .layout4,
        .layout5{
            margin:5px;
            overflow: hidden;
        }

        .content,
        .aside{
            min-height: 40px;
            text-align:center;
        }

        .content{
            background-color: #793d56;
            width: 100%;
            
        }

        .aside{
            background-color: #bb1c33;
            width:200px;
        }

        .inner1{
            margin-left: 200px;
        }

        #aside1,
        #content1{
            float: left;
        }

        #aside1{
            margin-left: -100%;

        }
        
        .inner2{
            margin-right: 200px;
        }

        #content2,
        #aside2{
            float:left;
        }

        #aside2{
            margin-left: -200px;
        }
        
        .inner3{
            margin-left:200px;
            margin-right:200px;
        }

        #content3,
        #aside3-left,
        #aside3-right{
            float:left;
        }

        #aside3-left{
            margin-left: -100%;
        }
        
        #aside3-right{
            margin-left: -200px;
        }
        
        .inner4{
            margin-left: 400px;
        }

        #content4,
        #aside4-left1,
        #aside4-left2{
            float: left;
        }

        #aside4-left1{
            margin-left: -100%;
        }
        
        #aside4-left2{
            position:relative;
            margin-left:-100%;
            left: 200px;
        }

        .inner5{
            margin-right: 400px;
        }

        #content5,
        #aside5-right1,
        #aside5-right2{
            float: left;
        }

        #aside5-right1{
            margin-left: -200px;
            position: relative;
            right: 200px;
        }
        
        #aside5-right2{
            margin-left:-200px;
        }

    </style>
</head>
<body>
    <div class="header">頭部</div>
    <div class="layout1">
        <div class="content" id="content1">
            <div class="inner1">內容區域自適應</div>
        </div>
        <div class="aside" id="aside1">左側邊欄固定</div>
    </div>
    <div class="layout2">
        <div class="content" id="content2">
            <div class="inner2">內容區域自適應</div>
        </div>
        <div class="aside" id="aside2">右側邊欄固定</div>
    </div>
    <div class="layout3">
        <div class="content" id="content3">
            <div class="inner3">內容區域自適應</div>
        </div>
        <div class="aside" id="aside3-left">左側邊欄固定</div>    
        <div class="aside" id="aside3-right">右側邊欄固定</div>
    </div>
    <div class="layout4">
        <div class="content" id="content4">
            <div class="inner4">內容區域自適應</div>
        </div>
        <div class="aside" id="aside4-left1">左側邊欄1固定</div>
        <div class="aside" id="aside4-left2">左側邊欄2固定</div>    
    </div>
    <div class="layout5">
        <div class="content" id="content5">
            <div class="inner5">內容區域自適應</div>
        </div>
        <div class="aside" id="aside5-right1">右側邊欄1固定</div>
        <div class="aside" id="aside5-right2">右側邊欄2固定</div>
    </div>
    <div class="footer">尾部</div>

</body>
</html>

各類狀況再也不作詳細的說明了，這裏只詳細的說一下兩邊側欄固定寬度，中間欄自適應是怎麼實現的。htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content,
        .aside{
            color:#fff;
            min-height: 40px;
            /*text-align:center;*/
        }
        
        .content{
            background-color: #793d56;
            width: 100%;
            
        }

        .aside{
            background-color: #bb1c33;
            width:200px;
        }

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

        #content3,
        #aside3-left,
        #aside3-right{
            float:left;
        }

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

    </style>
</head>
<body>
    <div class="layout3">
        <div class="content" id="content3">
            <div class="inner3">內容區域自適應</div>
        </div>
        <div class="aside" id="aside3-left">左側邊欄固定</div>    
        <div class="aside" id="aside3-right">右側邊欄固定</div>
    </div>
</body>
</html>