三欄布局——聖杯布局和雙飛翼布局

聖杯布局和雙飛翼布局的共同點：

1.都是實現左右寬度固定，中間自適應

2.在dom中主內容必須第一個加載（所以要把content放在left和right前面）

3.其父元素的高度始終是由三欄中高度最高的元素

它們的實現都是在以上三個的基礎上的。

1.聖杯布局

html部分：

<div class="demo">
        <div class="content">我是自適應的,要寫在前面優先渲染</div>
        <div class="left">左邊：我是固定的</div>
        <div class="right">右邊：我是固定的</div>
</div>

css部分實現思路：

1.三列布局都左浮動

2.設置content寬度為100%

3.給left元素設置margin-left:-100%;right元素設置margin-left:-200px,讓left，right元素和content元素能並排顯示

4.容器設置padding給左右兩列預留位置，padding大小分別為左右兩列的寬度

5.給left和right設置position:relative，設置left元素left:-100px(-自身寬度)，right元素right:-200px(-自身寬度)

css代碼如下：

.demo{ padding: 0 200px 0 100px;
    background-color: gray;
    overflow: hidden;
    zoom: 1;
}
.left,.right,.content{ float: left; position: relative;
}
.left{
    background-color: red;
    width: 100px;
    height: 100px; margin-left: -100%; left: -100px;
}
.right{
    background-color: bisque;
    width: 200px;
    height: 200px; margin-left: -200px; right: -200px;
}
.content{
    background-color: green; width: 100%;
}

效果如下：

2.雙飛翼布局

html部分

<div class="demo">
        <div class="content"><div class="inner-content">我是自適應的,要寫在前面優先渲染</div></div>
        <div class="left">左邊：我是固定的</div>
        <div class="right">右邊：我是固定的</div>
</div>

css實現思路（前三點實現同聖杯布局）：

1.三列布局都左浮動

2.設置content寬度為100%

3.給left元素設置margin-left:-100%;right元素設置margin-left:-200px,讓left，right元素和content元素能並排顯示

4.給content內層嵌套一個div，然后給這個div設置margin值

css部分代碼（標黃部分為相比聖杯布局新增部分）：

.demo{
            /* padding: 0 200px 0 100px; */
            background-color: gray;
            overflow: hidden;
            zoom: 1;
        }
        .left,.right,.content{
            float: left;
            /* position: relative; */
        }
        .left{
            background-color: red;
            width: 100px;
            height: 100px;
            margin-left: -100%;
            /* left: -100px; */
        }
        .right{
            background-color: bisque;
            width: 200px;
            height: 200px;
            margin-left: -200px;
            /* right: -200px; */
        }
        .content{
            background-color: green;
            width: 100%;
        } .inner-content{ margin: 0 200px 0 100px;
        }

效果如圖：

    總之，聖杯布局是通過父容器的內邊距來實現各列的間隙，而雙飛翼布局是通過新建的div的外邊距隔離各列的。

 

　　另外，實現左右定寬，中間自適應的三列布局也可以使用flex布局（簡單起見，沒有加瀏覽器前綴）。

　　html部分：

    <div class="flex-demo">
        <div class="content1">我是自適應的,要寫在前面優先渲染</div>
        <div class="left1">左邊：我是固定的</div>
        <div class="right1">右邊：我是固定的</div>
    </div>

 

      css部分：

.flex-demo{
            display: flex;
        }
        .content1{
            background-color: green;
            flex: 1;
            order: 2;
        }
        .left1{
            background-color: red;
            width: 100px;
            height: 100px;
            order: 1;
        }
        .right1{
            background-color: bisque;
            width: 200px;
            height: 200px;
            order: 3;
        }

效果圖如下：