css頁面佈局之左側定寬，右側自適應

 

二列布局的特徵是側欄固定寬度，主欄自適應寬度。
三列布局的特徵是兩側兩列固定寬度，中間列自適應寬度。

之因此將二列布局和三列布局寫在一塊兒，是由於二列布局能夠看作去掉一個側欄的三列布局，其佈局的思想有殊途同歸之妙。對於傳統的實現方法，主要討論上圖中前三種佈局，經典的帶有側欄的二欄佈局以及帶有左右側欄的三欄佈局，對於flex佈局，實現了上圖的五種佈局。

##### a. float+margin

###### 原理說明：設置兩個側欄分別向左向右浮動，中間列經過外邊距給兩個側欄騰出空間，中間列的寬度根據瀏覽器窗口自適應。

###### DOM文檔:

```
<div id="content">
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="main">main</div>
</div>
```

###### 佈局步驟:

1. 對兩邊側欄分別設置寬度，並對左側欄添加左浮動，對右側欄添加有浮動。
1. 對主面板設置左右外邊距，margin-left的值爲左側欄的寬度，margin-right的值爲右側欄的寬度。

###### CSS清單:

```
.sub{
width: 100px;
float: left;
}
.extra{
width: 200px;
float: right;
}
.main{
margin-left: 100px;
margin-right: 200px;
}
```

###### 一些說明:

*　注意DOM文檔的書寫順序，先寫兩側欄，再寫主面板，更換後則側欄會被擠到下一列（聖盃佈局和雙飛翼佈局都會用到）。
*　這種佈局方式比較簡單明瞭，但缺點是渲染時先渲染了側邊欄，而不是比較重要的主面板。

###### 二列的實現方法

若是是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設置主面板的margin-right值，其餘操做相同。反之亦然。

##### b. position+margin

###### 原理說明：經過絕對定位將兩個側欄固定，一樣經過外邊距給兩個側欄騰出空間，中間列自適應。

###### DOM文檔:

```
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>
```
###### 佈局步驟:

1. 對兩邊側欄分別設置寬度，設置定位方式爲絕對定位。
1. 設置兩側欄的top值都爲0，設置左側欄的left值爲0， 右側欄的right值爲0。
1. 對主面板設置左右外邊距，margin-left的值爲左側欄的寬度，margin-right的值爲右側欄的寬度。

###### CSS清單:

```
.sub, .extra {
position: absolute;
top: 0;
width: 200px;
}
.sub {
left: 0;
}
.extra {
right: 0;
}
.main {
margin: 0 200px;
}
```

###### 一些說明:

與上一種方法相比，本種方法是經過定位來實現側欄的位置固定。

若是中間欄含有最小寬度限制，或是含有寬度的內部元素，則瀏覽器窗口小到必定程度，主面板與側欄會發生重疊。

###### 二列的實現方法

若是是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設置主面板的margin-right值，其餘操做相同。反之亦然。

##### c. 聖盃佈局(float + 負margin + padding + position)

###### 原理說明：

主面板設置寬度爲100%，主面板與兩個側欄都設置浮動，常見爲左浮動，這時兩個側欄會被主面板擠下去。經過負邊距將浮動的側欄拉上來，左側欄的負邊距爲100%，恰好是窗口的寬度，所以會從主面板下面的左邊跑到與主面板對齊的左邊，右側欄此時浮動在主面板下面的左邊，設置負邊距爲負的自身寬度恰好浮動到主面板對齊的右邊。爲了不側欄遮擋主面板內容，在外層設置左右padding值爲左右側欄的寬度，給側欄騰出空間，此時主面板的寬度減少。因爲側欄的負margin都是相對主面板的，兩個側欄並不會像咱們理想中的停靠在左右兩邊，而是跟着縮小的主面板一塊兒向中間靠攏。此時使用相對佈局，調整兩個側欄到相應的位置。

###### DOM文檔:

```
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
```
###### 佈局步驟:

三者都設置向左浮動。

設置main寬度爲100%，設置兩側欄的寬度。

設置 負邊距，sub設置負左邊距爲100%，extra設置負左邊距爲負的自身寬度。

設置main的外圍的padding值給左右兩個子面板留出空間。

設置兩個子面板爲相對定位，sub的left值爲負的sub寬度，extra的right值爲負的extra寬度。

###### CSS清單:

```
.main {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
}
#bd {
padding: 0 230px 0 190px;
}
```

###### 一些說明

DOM元素的書寫順序不得更改。

當面板的main內容部分比兩邊的子面板寬度小的時候，佈局就會亂掉。能夠經過設置main的min-width屬性或使用雙飛翼佈局避免問題。

###### 二列的實現方法

若是是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設置主面板的padding-right值，其餘操做相同。反之亦然。

##### d. 雙飛翼佈局(float + 負margin + margin)

###### 原理說明：

雙飛翼佈局和聖盃佈局的思想有些類似，都利用了浮動和負邊距，但雙飛翼佈局在聖盃佈局上作了改進，在main元素上加了一層div, 並設置margin,因爲兩側欄的負邊距都是相對於main-wrap而言，main的margin值變化便不會影響兩個側欄，所以省掉了對兩側欄設置相對佈局的步驟。

###### DOM文檔:

```
<div id="main-wrap" class="column">
<div id="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
```
佈局步驟:

1. 三者都設置向左浮動。
1. 設置main-wrap寬度爲100%，設置兩個側欄的寬度。
1. 設置 負邊距，sub設置負左邊距爲100%，extra設置負左邊距爲負的自身寬度。
1. 設置main的margin值給左右兩個子面板留出空間。

###### CSS清單:

```
.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
```

###### 一些說明

聖盃採用的是padding，而雙飛翼採用的margin，解決了聖盃佈局main的最小寬度不能小於左側欄的缺點。

雙飛翼佈局不用設置相對佈局，以及對應的left和right值。

經過引入相對佈局，能夠實現三欄佈局的各類組合，例如對右側欄設置position: relative; left: 190px; ,能夠實現sub+extra+main的佈局。

###### 二列的實現方法

若是是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設置main-wrap的margin-right值，其餘操做相同。反之亦然。

##### e. flex佈局

如下是五種佈局的flex佈局代碼：

###### DOM文檔：

```
<div class="layout">
<aside class="layout__aside">側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">側邊欄寬度固定</aside>
</div>
<div class="layout">
<aside class="layout__aside">左側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">右側邊欄寬度固定</aside>
</div>
<div class="layout">
<aside class="layout__aside">第1個側邊欄寬度固定</aside>
<aside class="layout__aside">第2個側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">第1個側邊欄寬度固定</aside>
<aside class="layout__aside">第2個側邊欄寬度固定</aside>
</div>
```

###### CSS清單

```
.layout {
display: flex;
}
.layout__main {
flex: 1;
}
.layout__aside {
width: 200px;
}
```

##### f.table佈局

```
<!-- 表格佈局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
width:100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
<h1>三欄佈局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格佈局解決方案</h2>
1.這是三欄佈局的浮動解決方案；
2.這是三欄佈局的浮動解決方案；
3.這是三欄佈局的浮動解決方案；
4.這是三欄佈局的浮動解決方案；
5.這是三欄佈局的浮動解決方案；
6.這是三欄佈局的浮動解決方案；
</div>
<div class="right"></div>
</article>
</section>
```
##### g.grid佈局

 

```
<!-- 網格佈局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
width:100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-center-right>div{

}
.layout.grid .left{
width: 300px;
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{

background: blue; } </style> <h1>三欄佈局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>網格佈局解決方案</h2> 1.這是三欄佈局的浮動解決方案； 2.這是三欄佈局的浮動解決方案； 3.這是三欄佈局的浮動解決方案； 4.這是三欄佈局的浮動解決方案； 5.這是三欄佈局的浮動解決方案； 6.這是三欄佈局的浮動解決方案； </div> <div class="right"></div> </article> </section>```