如何在WordPress文本编辑器中实现文本与图片并排对齐不下沉

你之前使用浮动属性不生效，核心原因是WordPress编辑器默认会给内容元素添加自带的外层容器样式，或是自定义的内联样式被编辑器规则过滤。以下是两种可落地的解决方案：

方法1：编辑器原生功能实现（零代码） #

• 古腾堡（块）编辑器：直接插入媒体与文本块，该块默认支持左图右文/左文右图的固定并排结构，无需额外写样式。在块设置中可调整图片宽度、垂直对齐方式，选择「居中对齐」即可实现你要的并排对齐效果，文字不会自动下沉到图片下方。
• 经典编辑器：点击添加媒体上传图片后，在右侧「附件显示设置」中将对齐方式设为「左对齐」，插入图片后不要按回车换行，直接在图片右侧输入文本内容即可，编辑器会自动加载并排样式。

方法2：自定义Flex布局实现（可控性更高） #

Flex布局不会出现浮动导致的高度塌陷问题，兼容性也更强，不会被WordPress默认样式覆盖：

1. 切换到编辑器的「HTML/文本」编辑模式，给图片和文本套一层自定义容器，结构如下：

<div class="img-text-fixed-row">
  <img src="替换为你的图片URL" alt="图片描述" class="row-left-img">
  <div class="row-right-text">
    替换为你的文本内容
  </div>
</div>

2. 进入WordPress后台「外观」-「自定义」-「额外CSS」，添加以下样式代码：

/* 外层容器并排规则 */
.img-text-fixed-row {
  display: flex;
  align-items: center; /* 垂直居中，需要顶部对齐可改为flex-start */
  gap: 24px; /* 图文间距可自行调整数值 */
  margin: 16px 0;
}
/* 图片样式 */
.row-left-img {
  width: 40%; /* 图片宽度占比可调整 */
  flex-shrink: 0; /* 避免图片被文本挤压变形 */
}
/* 文本样式 */
.row-right-text {
  flex-grow: 1; /* 文本占满剩余宽度 */
}
/* 移动端自适应，小屏幕下自动改为上下堆叠 */
@media screen and (max-width: 767px) {
  .img-text-fixed-row {
    flex-direction: column;
  }
  .row-left-img {
    width: 100%;
  }
}

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