开篇概述
作为这个专栏的开篇,简单介绍一下开这个专栏的初衷。之前在团队中做代码 review 时,经常会发现一些不太“健壮”的 css 代码。这些不太“健壮”的 css 代码,当遇到一些特殊情况时,界面显示就有可能出现问题。其中,最常见的问题就是文字太长时会“撑爆”容器。当然,还有很多其它异常情况。
这个专栏打算将日常开发中比较常遇到的 css 布局场景一个个梳理出来。一方面,可以沉淀之前团队中做代码 review 的成果;另一方面,沉淀实现过程中的思考,后续再遇到类似的布局场景就可以直接复用,不用再把边界情况重新考虑一遍。
布局场景
如上图,这是一个比较常见的左右布局,但 UI 有两点要求:
1.右侧文本框的高度根据文本字数的多与少进行自适应
2.左侧文本框的高度要跟右侧的高度保持一致
翻译一下这两点需求,即如下图:
核心代码
<div class="layout"><div class="layout__left">体系知识</div><div class="layout__right">循环、变量、字符串、列表、字典、分支语句</div>
</div>