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>
```