布局模式 · 内容展示
分屏对比
Side-by-Side Comparison
也叫：左右对比、并排对比、分屏视图、Split View、Diff View
把两份结构相同的内容左右并排放在同一屏，对应部分逐行对齐，差异处高亮，方便逐项找出不同。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发用分屏对比布局展示两个版本的差异：左右各占 50%，中间 1px 分割线，两侧顶部分别标注「版本 A · 2026-09-01」「版本 B · 2026-09-03」；内容逐行对齐，两侧同步滚动，删除的内容用浅红底、新增的内容用浅绿底标出。顶部提供「只看差异」开关，以及跳到上一处、下一处差异的按钮。
发给
01判断
你的内容是这样吗？
对照两列，确认分屏对比是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
两侧内容没有逐行对齐，也不同步滚动，比较时要自己找对应位置
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
差异处没有任何高亮，用户只能逐字比对
- 03
两侧没有标注各自是哪个版本或哪个对象
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
屏幕左右等分为两个结构相同的面板，各带标题栏；两侧内容逐行对齐、同步滚动，差异处用底色标出。
组成部分点一下，在上面的线框里标出来
识别特征
- 1屏幕被一条竖线分成左右两个结构相同的面板
- 2两侧顶部各有版本号、日期或对象名称
- 3部分行带有底色，标出增删或修改的内容
04解释
详细解释
分屏对比把屏幕从中间一分为二，左右各放一份内容，比如文档的新旧两个版本、改动前后的代码、两款商品的参数、翻译的原文和译文。两边的对应部分上下对齐，滚动时同步，不同之处用底色高亮。
它解决的是「找不同」：用户不用在两个页面之间来回切换、凭记忆比较，视线左右一扫就能看出哪里变了。代码评审里的 Diff 视图、文档版本对比、修图前后的滑块对比，都属于这种布局。
它和主从布局的区别是：主从布局左边是列表、右边是详情，两边内容性质不同；分屏对比两边是同一种内容的两个版本或两个对象，结构相同。要比较的对象超过三个时，更适合用数据表，把每个对象做成一行或一列。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
layout-split-compare- DOM 选择器
- 没有专门的选择器，靠下面的关键词、组件名和结构识别。
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
comparecomparisonsplit-comparediff-viewside-by-sidebefore-afterversuscompare-view
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30