CSS三欄佈局——聖盃佈局、雙飛翼佈局和flex佈局

三欄佈局就是兩邊寬度固定,中間自適應的佈局.

改變瀏覽器的寬度,兩邊的寬度不會變,只會中間區域的寬度變長變短.

實現三欄佈局的方法有聖盃佈局、雙飛翼佈局和flex佈局

聖盃佈局

效果:

html代碼:

<header>header</header>
<div class="main clear-fix">
    <div class="center">玩亞索</div>
    <div class="left">睡覺</div>
    <div class="right">吃飯</div>
</div>
<div class="bottom">bottom</div>

這裏把center區域放在第一位是爲了讓瀏覽器先加載center區域.

css代碼:

* {
    color: #fff;
}
header {
    background-color: blue;
}
.main {
    background-color: orange;
    padding: 0 100px; /* 左右兩邊的padding來放置left和right區域 */
}
.left,.center,.right {
    float: left;
}
.center {
    background-color: purple;
    width: 100%; /* 這會把left和right擠到下一行 */
}
.left {
    background-color: red;
    width: 100px;
    margin-left: -100%; /* 把left移動到和center同一行而且左邊對齊 */
    position: relative;
    left: -100px; /* 再向左移動到main的padding區域,就不會擋住center了 */
}
.right {
    background-color: grey;
    width: 100px;
    margin-left: -100px; /* 把left移動到和center同一行而且右邊對齊 */
    position: relative;
    left: 100px; /* 向右移動到右邊的padding區域*/
}
footer {
    background-color: pink;
}
/* 清除浮動 */
.clear-fix::after {
    content: "";
    display: block;
    clear: both;
}

負邊距margin-left: 只會在包圍住你的父元素內部進行移動

position結合left: 是在元素原來位置的基礎上移動,有可能移動到瀏覽器顯示區域的外部.

雙飛翼佈局

效果:

html代碼:

<header>header</header>
  <div class="first">
    <div class="content">玩亞索</div>
  </div>
  <div class="second">睡覺</div>
  <div class="third">吃飯</div>
  <div class="footer">bottom</div>

css代碼:

.first,.second,.third {
    float: left;
}
/* 用這個div把主內容包起來以後,主內容就可以使用margin空出兩邊的區域了 */
.first {
    width: 100%;
    background-color: purple;
}
.content {
    margin: 0 100px;
}
.second {
    width: 100px;
    background-color: red;
    margin-left: -100%; /* 做用和聖盃同樣 */
}
.third {
    width: 100px;
    background-color: grey;
    margin-left: -100px; /* 做用和聖盃同樣 */
}
.footer {
    background-color: pink;
    clear: both; /* 清除footer上面元素的浮動 */
}

flex(推薦)

flex佈局學習請參考: https://www.ruanyifeng.com/bl...

效果:

html代碼:

<header>header</header>
  <div class="flex-box">
    <div class="flex-center">玩亞索</div>
    <div class="flex-left">睡覺</div>
    <div class="flex-right">吃飯</div>
  </div>
  <footer>footer</footer>

css代碼:

* {
    color: #fff;
}
header {
    background-color: blue;
}
.flex-box {
    display: flex;
}
.flex-center {
    background-color: purple;
    flex-grow: 1;
}
.flex-left {
    background-color: red;
    order: -1;
    flex: 0 0 100px;
}
.flex-right {
    background-color: green;
    flex: 0 0 100px;
}
footer {
    background-color: pink;
}