CSS 三欄佈局之聖盃佈局和雙飛翼佈局

CSS 三欄佈局之聖盃佈局和雙飛翼佈局

主要介紹兩種, 聖盃佈局和雙飛翼佈局

二者都是實現左右兩欄固定寬度, 中間自適應的三欄佈局. 寫了兩個Demo, 實現了兩種佈局的效果, 點擊能夠預覽 聖盃佈局 雙飛翼佈局

1. 聖盃佈局

聖盃佈局來源於文章In Search of the Holy Grail 首先給出固定HTML樣式, 注意中間的盒子要定義在前面先渲染

<div class="container">
    <div class="middle">
        <p>這是中間的盒子</p>
    </div>
    <div class="left">
        <p>這是左邊的盒子</p>
    </div>
    <div class="right">
        <p>這是右邊的盒子</p>
    </div>
</div>
複製代碼

1.1 首先給cotainer設置padding 撐開兩邊, 爲兩欄留出空間

.container {
    padding-left: 200px;
    padding-right: 150px;
}
複製代碼

獲得下圖

1.2. 給三個盒子都設置浮動, 給左右盒子定死寬度, 中間自適應, 同時清除浮動

/*清除浮動*/
.container::after {
    content: "";
    display: block;
    clear: both;
}

.left, .right, .middle {
    float: left;
}

.left {
    width: 200px;
}

.right {
    width: 150px;
}

.middle {
    width: 100%;
}
複製代碼

如此能夠獲得下圖, 中間盒子佔了100%, 所以佔據了整行, 左右兩個盒子被擠到了下面

接下來的工做就是將左右兩個盒子放到預留的位置上

1.3 利用負margin將左右盒子放置預留位置

還須要使用position: relative;, 來輔助定位

.left, .right {
    position: relative;
}

.left {
    margin-left: -100%;
    left: -200px;
}

.right {
    margin-left: -150px;
    right: -150px;
}
複製代碼

最終效果圖

總樣式

/* 公共樣式 */
.container {
    width: 800px;
    border: 1px dashed #dedede;
}

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left {
    width: 200px;
    background: #2DB3E4;
}

.right {
    width: 150px;
    background: #F37EC1;
}

.middle {
    width: 100%;
    background: #81B6AE;
}

.left, .right, .middle {
    float: left;
}
複製代碼

佈局樣式

.container {
    padding-left: 200px;
    padding-right: 150px;
}

.left, .right {
    position: relative;
}

.left {
    margin-left: -100%;
    left: -200px;
}

.right {
    margin-left: -150px;
    right: -150px;
}
複製代碼

2. 雙飛翼佈局

雙飛翼佈局, 源於淘寶UED 雙飛翼佈局須要更改DOM結構

<div class="container">
  <div class="middle">
      <div class="main">
          <p>這是中間的盒子</p>
      </div>
  </div>
  <div class="left">
      <p>這是左邊的盒子</p>
  </div>
  <div class="right">
      <p>這是右邊的盒子</p>
  </div>
</div>
複製代碼

在聖盃佈局中, 是經過給父容器設置padding, 用以給左右盒子留出空間 而在雙飛翼佈局中, 經過給中間的盒子中額外新增的div設置margin,

佈局樣式

.main {
    margin-left: 200px;
    margin-right: 150px;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -150px;
}
複製代碼

佈局樣式相對於聖盃佈局簡潔了很多, 不須要設置position: relative;來輔助定位

公共樣式

p {
    margin: 0;
    padding-bottom: 20px;
}

.container {
    width: 800px;
    border: 1px dashed #dedede;
}

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left {
    width: 200px;
    background: #2DB3E4;
}

.right {
    width: 150px;
    background: #F37EC1;
}

.middle {
    width: 100%;
    background: #81B6AE;
}

.left, .right, .middle {
    float: left;
}
複製代碼