三列布局

時間 2019-11-16

標籤佈局简体版

原文原文鏈接

中間三列布局想要的效果如圖

上、下爲頭部和底部，中間分紅3列，左右兩列爲固定寬度，中間的寬度隨着瀏覽器窗口變化而變化css

按下面三個步驟順序寫這個佈局，最後會有一個完整的代碼html

1. 基本的佈局結構（html代碼）

要把middle部分調整到left上，由於通常middle比較重要，因此讓它先進行渲染加載瀏覽器

<header>頭部</header>
<article>
    <div class="middle">中間</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</article>
<footer>底部</footer>

2. 設置尺寸、背景顏色

3. 調整佈局位置：4種不一樣的方案

關鍵點：ide

爲了讓left能夠回到middle的左側，須要讓它們脫離文檔流，以便從新佈局
爲了讓幾個div不會發生垂直方向的重疊，須要利用margin、padding等來預留空間
固然，用flex彈性盒子就不用考慮上面問題~

實現方法	涉及到的重要屬性設置
聖盃佈局	float: left	postion: relative	right/left: -50px	負margin
雙飛翼佈局	float: left	middle放在一個div中，佈局 padding+box-sizing或marginpost
用absolute實現	position: absolute	top, left, right: 0;flex	正margin值
用flex實現	display: flex	order: 2/1/3

源碼

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./custom.modernizr.js"></script>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #grail, #wing, #flex, #absolute{
        width: 100%;
        height: 300px;
    }
    #grail header{
        width: 100%;
        height: 20%;
        background-color: grey;
    }
    #grail    article{
        height: 60%;
    /*這個不用設置寬度*/
        padding: 0 50px 0 50px;
        position: relative;
    }
    #grail    article .middle{
        height: 100%;
        width: 100%;            
        background-color: green;
        float: left;

    }
    #grail    article .left{
        width: 50px;
        height: 80%;
        background-color: red;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -50px;
    }
    #grail    article .right{
        width: 50px;
        height: 80%;
        background-color: blue;
        float: left;
        margin-left: -50px;
        position: relative;
        right: -50px;
    }
    #grail    footer{
        width: 100%;
        height: 20%;
        background-color: gray;
    }
    #wing header{
        width: 100%;
        height: 20%;
        background-color: gray;
    }    
    #wing article{
        width: 100%;
        height: 60%;
    }    
    #wing .middle0{
        height: 100%;
        width: 100%;
        float: left;    
        /*用padding的方法給兩側留出位置
        須要設置box-sizing，由於默認設置的width是內容，padding會讓盒子向外擴展，並不能知足要求*/            
        /*padding: 0 50px 0 50px;
        box-sizing: border-box;*/
    }
    #wing .middle0 .middle{
        height: 100%;
        background-color: green;
        /*用margin的方法給兩側留出空間*/
        margin: 0 50px 0 50px;
    }
    #wing .left{
        width: 50px;
        height: 80%;
        background-color: red;
        float: left;
        margin-left: -100%;
    }
    #wing .right{
        width: 50px;
        height: 80%;
        background-color: blue;
        float: left;
        margin-left: -50px;
    }    
    #wing footer{
        width: 100%;
        height: 20%;
        background-color: gray;
    }
    #flex header{
        width: 100%;
        height: 20%;
        background-color: gray;
    }    
    #flex article{
        display: flex;
        width: 100%;
        height: 60%;
    }    
    #flex .middle{
        order: 2;/*設置子元素的排列位置*/
        background-color: green;
        width: 100%;
    }
    #flex .left{
        order: 1;
        background-color: red;
        width: 50px;/*不設寬度，由內容撐開*/
        /*不設置高度默認爲充滿整個父元素高*/
        height: 80%;
    }
    #flex .right{
        order: 3;
        background-color: blue;
        width: 50px;
        height: 80%;
    }
    #flex footer{
        width: 100%;
        height: 20%;
        background-color: gray;
    }
    #absolute header{
        width: 100%;
        height: 20%;
        background-color: gray;
    }    
    #absolute article{
        width: 100%;
        height: 60%;
        position: relative;
    }    
    #absolute .middle{
        background-color: green;
        /*width: 100%;*/
        height: 100%;
        /*兩側 position 設置爲absolut，脫離文檔流*/
        /*當前元素的兩側就變成了article邊框*/
        margin-left: 50px;
        margin-right: 50px;
    }
    #absolute .left{
        background-color: red;
        width: 50px;/*不設寬度，由內容撐開*/
        /*不設置高度默認爲充滿整個父元素高*/
        height: 80%;
        position: absolute;
        top: 0;
        left: 0;
    }
    #absolute .right{
        background-color: blue;
        width: 50px;
        height: 80%;
        position: absolute;
        right: 0;
        top: 0;
    }
    #absolute footer{
        width: 100%;
        height: 20%;
        background-color: gray;
    }
    </style>
</head>
<body>
<div id="grail">
<header>聖盃佈局</header>
<article>
    <div class="middle">中間</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</article>
<footer>底部</footer>
</div>
<div id="wing">
<header>雙飛翼佈局</header>
<article>
    <div class="middle0">
    <div class="middle">中間</div></div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</article>
<footer>底部</footer>
</div>
<div id="flex">
<header>用flex來實現三列布局</header>
<article>
    <div class="middle">中間</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</article>
<footer>底部</footer>
</div>
<div id="absolute">
<header>用absolute來實現三列布局</header>
<article>
    <div class="middle">中間</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</article>
<footer>底部</footer>
</div>
</body>
</html>