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

ゝ一纸荒年。 2022-11-17 10:11 213阅读 0赞

![206d25cce0979cc08e5b22727c65201b.png][]

## 一、背景 ##

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

PS: 文末有彩蛋

### 两栏布局 ###

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

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

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

![4e1777c9cca6fbae10b6724919f79831.png][]

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

### 三栏布局 ###

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

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

![3c8e3668e0bd2fcc3f4501b68592e2bd.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`弹性布局一样的简单

## 文末彩蛋 ##

能看到文末我都当你是自已人了

![c2d422e1b68b616698b14bb829a9c59d.gif][]

过去的时间总是感觉特别的快，一不留神已经更新完好几个系列 (为了方便阅读都给你们整理成了分类，进入公众号主页就能看到)

真心感谢一路相伴，一路支持的铁汁们，爱你们〜〜

彩蛋呢，其实就是带了几本React + Node 实战书籍免费包邮送给大家

它长这样，小仓鼠是不是特别可爱~~

![0f66967456b17efcc9d1c8fc33d90a3d.png][]

#### 简单介绍一下 ####

「《React Node.js开发实战：从入门到项目上线」共10章

分为4篇

*  第1篇“React和Node.js基础”，主要介绍开发环境的搭建、常用开发工具的使用，以及React与Node.js开发基础知识
 *  第2篇“打包部署和项目开发实战”，主要介绍构建与部署工具Webpack、Nginx和PM2的相关知识，并重点介绍如何使用React Node.js开发单页面评论系统项目案例
 *  第3篇“React和Node.js进阶”，主要介绍React与Node.js开发进阶知识，并重点介绍如何使用React Node.js开发社区项目案例
 *  第4篇“项目优化和服务端渲染”，主要介绍前后端项目优化的常用技巧，以提升系统的性能、用户体验和可靠性，并介绍SPA面临的服务端渲染问题及其解决方法，涉及Next.js与SEO等技术

想要了解更多的也可以点击下方小程序

#### 彩蛋获取姿势 ####

*  小程序自动开奖 \* **3本**（号内回复**888**参与抽奖）
 *  在看随机抽取 \* **2本** (PS：在看的需要是好友，可以在后台回复1获取好友位，否则抽奖列表是没有你的头像的，开奖会公布到朋友圈)
 *  开奖时间: **本周五  18:18**
 *  中奖后请12小时内填写收件信息(逾期视为弃权)

## 参考文献 ##

*  https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/
 *  https://segmentfault.com/a/1190000008705541

\--The End--

系列正在更新：8/20

点击下方卡片解锁更多

![34c555a3e647b3147ffe45f6e5be98ee.png][]

创作不易，星标、点赞、在看 三连支持

[206d25cce0979cc08e5b22727c65201b.png]: /images/20221022/9a89601291d64cc5a3818ee070c271da.png
[4e1777c9cca6fbae10b6724919f79831.png]: /images/20221022/584430da447a4471810369cc9c4fece8.png
[3c8e3668e0bd2fcc3f4501b68592e2bd.png]: /images/20221022/88b340d1ecaf4e18b70356c7e5a4273b.png
[c2d422e1b68b616698b14bb829a9c59d.gif]: /images/20221022/b0652f561a1c4eb083d06d7419661bd1.png
[0f66967456b17efcc9d1c8fc33d90a3d.png]: /images/20221022/f8ecb9afe583463399e63680efddfb15.png
[34c555a3e647b3147ffe45f6e5be98ee.png]: /images/20221022/16f37dac00eb4979b92e7c9b4ad84a59.png