css中聖杯布局和雙飛翼布局的介紹（附代碼）

這篇文章給大家介紹的內容是關於css中聖杯布局和雙飛翼布局的介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

聖杯布局

<div id="header">#header</div>  <div id="container">    <div id="center" class="column">#center</div>    <div id="left" class="column">#left</div>    <div id="right" class="column">#right</div>  </div>  <div id="footer">#footer</div>

實現的效果主要在container中，left 和 rgith固定寬度，center首先渲染，且自適應寬度。

    body {      min-width: 500px;    }    #container {      overflow: auto;        /* BFC */      padding-left: 180px;      padding-right: 150px;    }    #container .column {      height: 200px;      position: relative;      float: left;    }    #center {      background-color: #e9e9e9;      width: 100%;    }    #left {      background-color: red;      width: 180px;      right: 180px;       margin-left: -100%    }    #right {      background-color: blue;      width: 150px;       margin-right: -150px;    }    #header,     #footer {      background-color: #c9c9c9;    }

該方案幾個注意的點：

1. center元素位於left和right之前，可以讓center先渲染，使用者首先看到頁面的主要內容。

2. container （width:100%）包裹著三欄內容，通過padding-left和padding-right為左右兩欄騰出空間。

3. center，left，right都設定一個左浮動（float:left），所以container內部是一個浮動流。

4. 通過給 left 元素設定 margin-left: -100%，使得left移動到container的左上方，在通過position：relative； right: 180px，移動到container的padding-left的位置上去。

5. 給right 元素設定 margin-right: -150px，使得它移動到container的padding-right的位置上去。

ps: margin-left 和 margin-right 利用了浮動流的特性，使得第一行能夠同時容納center，left，right這三個元素。

聖杯布局（flexbox實現）

<div id="HolyGrail">  <div id="header">#header</div>  <div id="container">    <div id="center" class="column">#center</div>    <div id="left" class="column">#left</div>    <div id="right" class="column">#right</div>  </div>  <div id="footer">#footer</div>

    body {      min-width: 550px;      }    #HolyGrail {      display: flex;      min-height: 100vh;      flex-direction: column;    }    #container {      display: flex;      flex: 1;    }    #center {      background-color: #e9e9e9;      flex: 1;    }    #left {      background-color: red;      order: -1;      width: 150px;    }    #right {      background-color: blue;      width: 150px;    }    #header,     #footer {      height: 50px;      background-color: #c9c9c9;    }

如果不考慮ie10及以下的瀏覽器，那麼可以使用flex來實現聖杯布局。而且聖杯布局可以通過讓container填充高度來使得footer達到一個sticky的效果。
flex相容性

雙飛翼布局

聖杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。聖杯布局和雙飛翼布局問題的解決方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄p並排，以形成三欄布局。不同的地方在於解決中間p內容不被遮擋的思路上面

1. 聖杯布局的為了中間內容不被修改，是通過包裹元素的padding-left和padding-right來使得內容p置於中間，然後再通過相對定位position:relative，配合right或left屬性讓左右兩欄不則當中間內容。

2. 雙飛翼布局的解決方案是：通過再中間元素的內部新增一個p用於放置內容，然後通過左右外邊距margin-left和margin-right為左右兩欄留出位置。

3. 雙飛翼布局多了1個p標籤，少用了4個css屬性。少用了padding-left，padding-right，左右兩個p用相對布局position: relative及對應的right和left，多了margin-left，margin-right。

<div id="header">#header</div>  <div id="container">    <div id="center" class="column">      <div id="center-content">#center</div>    </div>    <div id="left" class="column">#left</div>    <div id="right" class="column">#right</div>  </div>  <div id="footer">#footer</div>

    body {      min-width: 500px;      }    #container {      overflow: auto;        /* BFC */    }    #container .column {      height: 200px;      float: left;    }    #center {      background-color: #e9e9e9;      width: 100%;    }    #center-content {      margin-left: 180px;      margin-right: 150px;    }     #left {      width: 180px;      background-color: red;      margin-left: -100%;    }    #right {      background-color: blue;      width: 150px;        margin-left: -150px;     }    #header,     #footer {      background-color: #c9c9c9;    }