Divi Blurb模块无法实现行内等高，如何解决高度不一致问题？

1. 统一模块内部元素的边距/内边距 #

视觉上的高度差异往往不是容器本身的问题，而是模块内部标题、文本、图标自带的margin/padding不统一导致的：

• 给所有Blurb模块的标题设置固定的margin-bottom值（比如20px），避免因标题行数不同造成底部留白差异
• 给Blurb的文本区域设置flex-grow:1，让文本区域自动填充容器剩余空间，确保底部元素对齐

2. 用Flex布局替换原生高度设置 #

放弃直接设置height:100%这类CSS，改用flex布局强制容器等高，更适配Divi的列结构：

• 在Blurb模块的「高级→自定义CSS→Main Element」中添加：

display: flex;
flex-direction: column;
height: 100%;

• 给Blurb内容容器（.et_pb_blurb_content）添加：

flex-grow: 1;
display: flex;
flex-direction: column;

• 给文本描述区域（.et_pb_blurb_description）添加：

flex-grow: 1;

3. 排查插件冲突 #

如果你使用了Divi Blurb Extended这类扩展插件，检查插件内是否有独立的高度控制选项，这类设置可能和原生Divi的「列等高」功能冲突，暂时禁用插件的高度相关配置后再测试。

4. 确保CSS生效优先级 #

浏览器缓存或高优先级样式可能导致自定义CSS不生效：

• 清除浏览器缓存和网站缓存（如WP Rocket、W3 Total Cache）
• 给CSS规则添加模块ID提升优先级（可通过浏览器开发者工具获取模块ID）：

#your-blurb-module-id {
  display: flex;
  flex-direction: column;
  height: 100% !important;
}

5. 清理列内冗余元素 #

确认每个列中仅包含目标Blurb模块，无额外的换行、空格或隐藏元素，这类冗余内容可能干扰Divi的列高度计算逻辑。

内容的提问来源于stack exchange，提问作者Claire Nicholson