双栏布局中图文配比需确保视觉流自然、权重匹配、响应后可读：Flexbox用flex: 0 0 40%/flex: 1+align-items: flex-start控制宽高比与对齐；Grid用1fr/2fr+gap: 2rem实现带呼吸感的结构化分栏；响应式下改flex-direction: column并适配图片尺寸与文字间距。
双栏布局里插图配字，不是把图和字塞进左右两栏就完事——关键在视觉流是否自然、图文权重是否匹配、响应后是否仍可读。
用 Flexbox 实现左图右文 / 左文右图的可控配比
Flexbox 是目前最稳妥的图文配比方案，尤其适合图文一一对应、且需控制宽高比或对齐方式的场景（如产品页、技术文档配图）。
- 图片区域设
flex: 0 0 40%，文字区域用flex: 1，避免图片被压缩又保留文字弹性空间 - 必须加
align-items: flex-start，否则默认center会让短文本在垂直方向“飘”起来 - 若图片高度不固定（比如响应式缩放），别依赖
height: 100%，改用aspect-ratio: 4/3或min-height配合object-fit: cover - 常见错误：给文字容器加
margin-top对齐图片顶部——这会破坏 Flex 的对齐逻辑，应统一用align-self: flex-start控制单个子项
用 CSS Grid 做带留白与语义区隔的图文分栏
Grid 更适合需要明确列间距、图文之间有呼吸感、或后续要扩展侧边栏（如标签、作者信息）的结构化双栏。
- 写
grid-template-columns: 1fr 2fr比写百分比更可靠，fr单位能自动适配剩余空间 - 用
gap: 2rem统一图文间距，别在图片上加margin-right——后者在小屏下容易导致溢出 - 如果插图需居中于左侧栏内，不要用
text-align: center，而是在图片外再包一层div并设display: grid; place-items: center - 注意：Grid 容器里不能嵌套
columns: 2，否则多栏文本会无视网格结构强行断行
图文混排时字体与背景的对比陷阱
插图配字最容易被忽略的是可读性崩塌点——不是图不够大，而是文字在图上“看不见”或“看不清节奏”。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 深色图片配浅色字时，别只加
color: white，务必叠加background: rgba(0,0,0,0.5)或使用text-shadow: 0 1px 2px black提升边缘识别度 - 若图片本身含大量细节（如实景图、截图），建议用
filter: brightness(0.7) contrast(1.2)降低干扰，再上文字 - 文字行高至少设为
line-height: 1.6，小于 1.4 会导致多行文字粘连，尤其在小屏上阅读吃力 - 避免在图片上直接写长段落；超过 3 行就该考虑拆成要点列表，或把核心句抽出来做标题+图注形式
响应式断点下图文关系如何不“错位”
双栏变单栏不是简单堆叠，而是重新定义图文主次——很多项目在移动端变成“图在上、字在下”，但没处理好图片尺寸收缩和文字重排，结果图糊字挤。
- 在
@media (max-width: 768px)下，把display: flex改成flex-direction: column，同时给图片加width: 100%; height: auto - 文字区域取消
flex: 1，改用margin-top: 1rem隔开，避免小图+大段文字紧贴造成压迫感 - 如果原双栏中图片是装饰性（如角标、icon），移动端可直接
display: none，别让它占位又无意义 - 测试重点：横屏 iPad（1024px）下是否出现“半图半字”卡在中间——这是
min-width或flex-basis没设好导致的典型错位
真正难的不是让图文并排，而是让它们在不同设备、不同内容长度、不同图片比例下，始终维持一种“用户一眼知道先看哪、再看哪”的视觉契约。这个契约靠代码写不出来，得靠每次调整后盯着预览界面，看三秒——眼睛停在哪，就说明哪出了问题。
