Editor.js图片块在移动端如何自适应导致文字与图片重叠

码农艳花提问于 2026-01-31 16:45:26 阅读 18

交互

我在用Editor.js做图文混排时遇到问题，移动端图片块和文字块会重叠。尝试给.editor-block加了flex布局：


.editor-block {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 100%;
}

但图片依然挤到文字上方，用开发者工具发现图片的实际宽度超过了容器。试过设置标签max-width:100%也不管用，求大神指点具体怎么调整？

富文本编辑

我来解答赞 8 收藏

反馈

2 条解答

Top丶华丽 Lv1

图片自适应问题通常是样式没写全，加这个就搞定了：

.cdx-image img {

  max-width: 100%;

  height: auto;

  display: block;

}

再检查下父级容器是否有溢出隐藏。

2026-02-02 13:03

沁仪 Dev Lv1

别走弯路，这个问题我之前也踩过坑。Editor.js的图片块默认样式确实容易在移动端出问题，光给容器加flex是不够的。

你需要同时处理两部分：

1. 图片本身的样式：

.cdx-image img {

  max-width: 100%;

  height: auto;

  display: block;

}

2. 包裹图片的容器：

.cdx-image {

  width: 100%;

  margin: 0 auto;

}

重点是 img 要单独设置 max-width:100% 和 height:auto，这样才能确保图片不会超出容器宽度。而且别忘了 display:block，不然可能会有空白缝隙。

记得检查是否有其他全局样式影响到，特别是某些框架自带的默认样式。这样调整后基本就能解决重叠问题了。

2026-01-31 17:01