左右等高布局

开篇概述

作为这个专栏的开篇，简单介绍一下开这个专栏的初衷。之前在团队中做代码 review 时，经常会发现一些不太“健壮”的 css 代码。这些不太“健壮”的 css 代码，当遇到一些特殊情况时，界面显示就有可能出现问题。其中，最常见的问题就是文字太长时会“撑爆”容器。当然，还有很多其它异常情况。

这个专栏打算将日常开发中比较常遇到的 css 布局场景一个个梳理出来。一方面，可以沉淀之前团队中做代码 review 的成果；另一方面，沉淀实现过程中的思考，后续再遇到类似的布局场景就可以直接复用，不用再把边界情况重新考虑一遍。

布局场景

如上图，这是一个比较常见的左右布局，但 UI 有两点要求：

1.右侧文本框的高度根据文本字数的多与少进行自适应
2.左侧文本框的高度要跟右侧的高度保持一致

翻译一下这两点需求，即如下图：

核心代码

<div class="layout"><div class="layout__left">体系知识</div><div class="layout__right">循环、变量、字符串、列表、字典、分支语句</div>
</div>