上下分屏 · Horizontal Split
英文：Horizontal Split
网格与版式难度：入门 ★
🗣️一句话大白话
用水平分界把图像与文字或两个场景叠放，天然形成先后和上下文关系。最常见写法是上主下辅：上半幅主视觉建立情绪，下半幅信息区承载标题与说明；也可以反向，用上方文字引出下方图像。
🖼️样图参考
🎬真实场景
电影、旅行、讲座、产品说明、数据+图像
📮你可以这样说
「【图像模型版】竖版 3:4 海报，主题为[主题]。采用上下分屏构图：画面按 62/38 水平分割，上部为[主视觉描述]的大幅图像，下部为纯色信息区，主标题「[主标题]」与日期、署名沿同一条左边线对齐；分界线平直干净，不落在主体关键部位；层级清楚、平面设计。避免分界线卡在人脸或标题中部、避免上下等分失去主次。Keywords: horizontal split, stacked panels, image-text division, 62/38 split. 【HTML/CSS 版】容器 aspect-ratio: 3/4，display:grid，grid-template-rows: 62fr 38fr；上格放图（object-fit:cover），下格为信息区、内部用单列 grid 排标题与元信息；上下区域共用同一条左右 padding，保证共同边线。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸分界线卡在主体脸部或文字中线，画面立刻别扭
- ▸上下等分容易失去主次，比例要体现谁先看
🚫什么时候别用
- ✗需要左右并置对比的场景（改用左右分屏）
🧩常见变体
上主下辅上信息下图斜向分界（进阶）
💡小贴士
- ✦先定上下主次比例（62/38 或 70/30），再谈风格
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
🛠️关联 AI 绘图知识
在「AI 绘图工作台」查看该术语的提示词与案例（需本地启动工作台，端口 5345）