本文详解解决 divi blurb 模块高度不一致问题的实操方案，涵盖视觉构建器设置、css 优化及常见陷阱，确保多列 blurb 在不同设备下严格等高。
在 Divi 主题中，Blurb 模块常被用于展示功能亮点或服务项，但许多用户（如您所示案例）会遇到一个典型问题：即使启用了「Equalize Column Heights」（等高列）选项，并为 Blurb 添加了 height: 100%; min-height: 100%; max-height: 100%; 等 CSS，仍会出现某一项（例如“Database Generation”）明显偏矮的情况。这并非 CSS 失效，而是 Divi 的渲染机制与响应式断点共同导致的布局偏差。
根本原因在于：Divi 视觉构建器（Visual Builder）默认采用 400px 宽度预览视口 来实时渲染模块，而该宽度下，文字换行、图标尺寸、内边距计算均可能触发高度重排——尤其当某 Blurb 标题稍长或描述含多行文本时，其实际内容高度在 400px 下未被充分“撑开”，导致后续在桌面端（如 1200px+）渲染时，父容器（Row）未能正确继承统一高度。
✅ 正确解法（经实测验证）：
在 Visual Builder 中，将预览宽度从默认的 400px 切换为 360px（位于右上角设备切换栏 → 自定义宽度 → 输入 360 → 回车）。然后：
- 确保 Row 设置中开启 Equalize Column Heights = YES；
- 移除 Blurb 模块上冗余的 height: 100% 类 CSS（它反而可能干扰 Flex 布局）；
- 仅保留必要样式以增强健壮性（推荐添加至 Divi → 主题选项 → 自定义 CSS）：
/* 确保 Blurb 容器在 Flex 行中拉伸 */
.et_pb_blurb {
display: flex;
flex-direction: column;
height: 100%;
}
.et_pb_blurb_content {
flex: 1 1 auto;
}
.et_pb_blurb_description {
margin-bottom: 0; /* 避免底部外边距破坏等高 */
}⚠️ 注意事项：
- 不要依赖 min-height: 100% —— 在未明确父级高度时，百分比高度无效；
- 避免对 .et_pb_blurb 直接设 height: 100%，因 Divi 的 Blurb 默认是 display: block，需先转为 flex 才能可靠拉伸；
- 切换 360px 后务必逐个点击 Blurb 模块并保存一次（哪怕未修改），强制重建高度计算缓存；
- 若使用 Divi Extended 等插件，请检查其「Blurb Extended」设置是否启用了「Auto Height」冲突选项。
最终效果：所有 Blurb 在桌面、平板、移动端均严格等高，且内容区域自适应填充，图标与文字垂直居中自然，无需 JavaScript 干预。这一方案直击 Divi 渲染链路中的预览断点盲区，是目前最稳定、零兼容性风险的原生解决方案。
