css實現三欄水平佈局雙飛翼與聖盃佈局

做爲佈局的入門級選手，網上也查看了不少信息和資源

雙飛翼的html結構

<div class="container"> 
　　<div class="main">
    　　<div class="content">main</div> 
    </div>
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

 

雙飛翼和聖盃的佈局方式相似，都用到了關鍵的浮動和負值的margin-left

第一步：先正常設置長寬，同一高度爲120px，因爲是標準流的緣故，因此三個div盒子一共分爲三層

    .left, .right, .main {
        height: 120px;
    }
    .content {
        margin: 0 300px 0 200px;
    }
    .left {
        width: 200px;
        background-color: green;
    }
    .right {
        width: 300px;
        background-color: red;
    }
    .main {
        width: 100%;
        background-color: blue;
    }

效果以下

 

第二步：添加浮動，所有脫離標準流，由於main是的寬度是100%，佔滿整個盒子的寬度，因此left和right的盒子被擠到第二行

    .left, .right, .main {
        height: 120px;
        float: left;
    }
    .content {
        margin: 0 300px 0 200px;
    }
    .left {
        width: 200px;
        background-color: green;
    }
    .right {
        width: 300px;
        background-color: red;
    }
    .main {
        width: 100%;
        background-color: blue;
    }

效果以下

第三步：使用margin-left的負值屬性來實現這個效果

這個margin-left:-100%指的是子盒子的左邊框相對父盒子的右邊框的距離

    .left, .right, .main {
        height: 120px;
        float: left;
        text-align: center;
    }
    .content {
        margin: 0 300px 0 200px;
    }
    .left {
        width: 200px;
        background-color: green;
        margin-left: -100%;
    }
    .right {
        width: 300px;
        background-color: red;
        margin-left: -300px; 
    }
    .main {
        width: 100%;
        background-color: blue;
    }

相對第二步，就多了margin-left的屬性

先看right盒子，相對父盒子container，他的左邊框必須距離container的右邊框300px，因此是margin-left: -300px; 

left同樣，left盒子的左邊框必須距離父盒子的右邊框的100%個寬度，因此是margin-left: -100%;

效果以下

聖盃的佈局相似雙飛翼

多了定位，div相對少了一個

    <div class="container">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>    
    </div>

        .container {
            padding: 0 300px 0 200px;
        }
        .left,.right,.middle {
            height: 120px;
            float: left;
            position: relative;
            text-align: center;
        }
        .middle {
            width: 100%;
            background-color: blue;
        }
        .left {
            left: -200px;
            width: 200px;
            margin-left: -100%;
            background-color: green;
        }
        .right {
            right: -300px;
            width: 300px;
            margin-left: -300px;
            background-color: red;
        }

關於聖盃佈局能夠參考博客

https://blog.csdn.net/wangchengiii/article/details/77926868