如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

╰半橙微兮° 2023-01-16 02:50 138阅读 0赞

![图片][4771bd453eb50524b701a776732af6a3.png]

## 一、背景 ##

在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高

PS: 文末有彩蛋

### 两栏布局 ###

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，

比如 `Ant Design` 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器

> ❝
> 
> 这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器
> 
> ❞

![图片][9f7180be06ce8e8a250a5dd4e0d4056d.png]

这种布局适用于内容上具有明显主次关系的网页

### 三栏布局 ###

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

大家最常见的就是`github`：

![图片][108ae615b36d8a932f406208b143445b.png]

## 二、双栏布局 ##

双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单：

*  使用 float 左浮左边栏
 *  右边模块使用 margin-left 撑出内容块做内容展示
 *  为父级元素添加BFC，防止下方元素飞到上方内容

代码如下：

还有一种更为简单的使用则是采取：flex弹性布局

### flex弹性布局 ###

`flex`可以说是最好的方案了，代码少，使用简单

注意的是，`flex`容器的一个默认属性值:`align-items: stretch;`

这个属性导致了列等高的效果。为了让两个盒子高度自动，需要设置: `align-items: flex-start`

## 三、三栏布局 ##

实现三栏布局中间自适应的布局方式有：

*  两边使用 float，中间使用 margin
 *  两边使用 absolute，中间使用 margin
 *  两边使用 float 和负 margin
 *  display: table 实现
 *  flex实现
 *  grid网格布局

### 两边使用 float，中间使用 margin ###

需要将中间的内容放在`html`结构最后，否则右侧会臣在中间内容的下方

实现代码如下：

原理如下：

*  两边固定宽度，中间宽度自适应。
 *  利用中间元素的margin值控制两边的间距
 *  宽度小于左右部分宽度之和时，右侧部分会被挤下去

这种实现方式存在缺陷：

*  主体内容是最后加载的。
 *  右边在主体内容之前，如果是响应式设计，不能简单的换行展示

### 两边使用 absolute，中间使用 margin ###

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

实现流程：

*  左右两边使用绝对定位，固定在两侧。
 *  中间占满一行，但通过 margin和左右两边留出10px的间隔

### 两边使用 float 和负 margin ###

实现过程：

*  中间使用了双层标签，外层是浮动的，以便左中右能在同一行展示
 *  左边通过使用负 margin-left:-100%，相当于中间的宽度，所以向上偏移到左侧
 *  右边通过使用负 margin-left:-100px，相当于自身宽度，所以向上偏移到最右侧

缺点：

*  增加了 .main-wrapper 一层，结构变复杂
 *  使用负 margin，调试也相对麻烦

### 使用 display: table 实现 ###

`<table>` 标签用于展示行列数据，不适合用于布局。但是可以使用 `display: table` 来实现布局的效果

实现原理：

*  层通过 display: table设置为表格，设置 table-layout: fixed\`表示列宽自身宽度决定，而不是自动计算。
 *  内层的左中右通过 display: table-cell设置为表格单元。
 *  左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度

### 使用flex实现 ###

利用`flex`弹性布局，可以简单实现中间自适应

代码如下：

实现过程：

*  仅需将容器设置为`display:flex;`，
 *  盒内元素两端对其，将中间元素设置为`100%`宽度，或者设为`flex:1`，即可填充空白
 *  盒内元素的高度撑开容器的高度

优点：

*  结构简单直观
 *  可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间

### grid网格布局 ###

代码如下：

跟`flex`弹性布局一样的简单

[4771bd453eb50524b701a776732af6a3.png]: /images/20221022/53f2d9ea6af54564a93e5fc9b0614e30.png
[9f7180be06ce8e8a250a5dd4e0d4056d.png]: /images/20221022/018b8e97bad74a17a501dbfce7d4cbe2.png
[108ae615b36d8a932f406208b143445b.png]: /images/20221022/0f7266dff9c54823ae59a66609225431.png