CSS-聖盃佈局、雙飛翼布

三欄佈局中，經典中的經典應該就是聖盃佈局、雙飛翼佈局沒跑了。

先熟悉一下聖盃佈局、雙飛翼佈局中的特色：

• 兩側定寬，中間自適應
• 主要內容優先渲染

聖盃佈局

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

(1) 首先設置好.main、.left、.right的寬度並浮動，爲左右兩列預留出空間。

.container {
  padding-left: 200px;  /* 預留左側空間，爲.left寬度*/
  padding-right: 300px; /* 預留右側空間，爲.right寬度*/
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background: #67c23a;
}
.left {
  float: left;
  width: 200px;
  height: 300px;
  background: #e6a23c;
}
.right {
  float: left;
  width: 300px;
  height: 300px;
  background: #f56c6c;
}

(2) 經過負margin、position把<div class="left">left</div>移動到左側預留位置。

.left {
  float: left;
  margin-left: -100%;   /* 移動到左側，100%是一個父元素寬度，這裏也就是.container的寬度 */
  position: relative;   /* 由於.container設置了padding */
  right: 200px;         /* 因此須要再向左移動自身寬度,left: -200px;也是能夠的 */
  width: 200px;
  height: 300px;
  background: #e6a23c;
}

(3) 經過負margin把<div class="right">right</div>移動到右側預留位置。

.right {
  float: left;
  margin-right: -300px; /* 移動到右側，自身寬度*/
  width: 300px;
  height: 300px;
  background: #f56c6c;
}

完整代碼：

.container {
  padding-left: 200px;  /* 預留左側空間，爲.left寬度*/
  padding-right: 300px; /* 預留左側空間，爲.right寬度*/
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background: #67c23a;
}
.left {
  float: left;
  margin-left: -100%;   /* 移動到左側，100%是一個父元素寬度，這裏也就是.container的寬度 */
  position: relative;   /* 由於.container設置了padding*/
  right: 200px;         /* 因此須要再向左移動自身寬度,left: -200px;也是能夠的 */
  width: 200px;
  height: 300px;
  background: #e6a23c;
}
.right {
  float: left;
  margin-right: -300px; /* 移動到右側，自身寬度*/
  width: 300px;
  height: 300px;
  background: #f56c6c;
}

雙飛翼佈局

<div class="main-wrap">
    <div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

(1) 首先設置好.wrap、.main-wrap、.left、.right的寬度並浮動，爲左右兩列預留出空間。

.main-wrap {
  float: left;
  width: 100%;  /* 這個必須設置，否則浮動起來，沒寬度 */
}
.main {
  margin-left: 200px;   /* 預留左側空間，爲.left寬度 */
  margin-right: 300px;  /* 預留左側空間，爲.right寬度 */
  height: 300px;
  background: #67c23a;
}
.left {
  float: left;
  width: 200px;
  height: 300px;
  background: #e6a23c;
}
.right {
  float: left;
  width: 300px;
  height: 300px;
  background: #f56c6c;
}

(2) 經過負margin把<div class="left">left</div>移動到左側預留位置。

.left {
  float: left;
  margin-left: -100%;   /* 移動到左側，100%是一個父元素寬度，這裏也就是body的寬度*/
  width: 200px;
  height: 300px;
  background: #e6a23c;
}

(3) 經過負margin把<div class="right">right</div>移動到右側預留位置。

.right {
  float: left;
  margin-left: -300px;  /* 移動到右側，自身寬度*/
  width: 300px;
  height: 300px;
  background: #f56c6c;
}

完整代碼：

.main-wrap {
  float: left;
  width: 100%;
}
.main {
  margin-left: 200px;   /* 預留左側空間，爲.left寬度*/
  margin-right: 300px;  /* 預留左側空間，爲.right寬度*/
  height: 300px;
  background: #67c23a;
}
.left {
  float: left;
  margin-left: -100%;   /* 移動到左側，100%是一個父元素寬度，這裏也就是body的寬度*/
  width: 200px;
  height: 300px;
  background: #e6a23c;
}
.right {
  float: left;
  margin-left: -300px;  /* 移動到右側，自身寬度*/
  width: 300px;
  height: 300px;
  background: #f56c6c;
}