左右等高布局

作为这个专栏的开篇,简单介绍一下开这个专栏的初衷。之前在团队中做代码 review 时,经常会发现一些不太“健壮”的 css 代码。这些不太“健壮”的 css 代码,当遇到一些特殊情况时,界面显示就有可能出现问题。其中,最常见的问题就是文字太长时会“撑爆”容器。当然,还有很多其它异常情况。这个专栏打算将日常开发中比较常遇到的 css 布局场景一个个梳理出来。一方面,可以沉淀之前团队中做代码 review 的成果;
摘要由CSDN通过智能技术生成

开篇概述

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

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

布局场景

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

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

翻译一下这两点需求,即如下图:

核心代码

<div class="layout"><div class="layout__left">体系知识</div><div class="layout__right">循环、变量、字符串、列表、字典、分支语句</div>
</div> 
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值