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

zzzmj發表於2019-02-27
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;
}
複製程式碼

得到下圖

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

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

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

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

.left {
    width: 200px;
}

.right {
    width: 150px;
}

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

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

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

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

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

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

.left, .right {
    position: relative;
}

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

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

最終效果圖

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

總樣式

/* 公共樣式 */
.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;
}
複製程式碼

相關文章