Contentful+ReactMarkdown场景下，<p>标签图片与文字并排实现方法

根据你遇到的两种HTML结构，分别提供对应的CSS解决方案，不需要给<p>标签添加类名：

场景1：图片单独占一个<p>，文字在后续<p>中 #

对应HTML结构：

<p>Some text content</p>
<p>
  <img src="myImage.png" alt="my image">
</p>
<p>Multiple lines of text that I want to have next to the image</p>

解决方案（浮动布局） #

/* 让包含图片的p标签宽度适配图片，左浮动 */
p:has(img) {
  float: left;
  margin-right: 1.5rem; /* 调整图片与文字的间距 */
  width: auto;
}

/* 让后续的文字p标签自动填充剩余空间，环绕图片 */
p:has(img) + p {
  overflow: hidden;
}

/* 清除浮动，避免影响后续的其他p标签 */
p:has(img) + p + p {
  clear: both;
}

如果需要更规整的对齐，也可以用Grid布局：

/* 给父容器设置Grid */
.parent-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
}

/* 图片所在p占第一列 */
p:has(img) {
  grid-column: 1;
}

/* 文字p占第二列，顶部对齐图片 */
p:has(img) + p {
  grid-column: 2;
  align-self: start;
}

/* 后续的p标签恢复整行展示 */
p:has(img) + p + p {
  grid-column: 1 / -1;
}

场景2：图片和文字在同一个<p>标签内 #

对应HTML结构：

<p>Some text content
  <img src="myImage.png" alt="my image">
Multiple lines of text that I want to have next to the image</p>

解决方案 #

直接给<p>内的图片设置浮动即可：

p img {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 0.5rem; /* 避免图片和下方文字重叠 */
}

这样文字会自动环绕在图片右侧，不需要额外调整。

补充说明 #

• 如果你的项目需要兼容不支持:has()选择器的旧浏览器，可以用JavaScript遍历DOM，给包含图片的<p>添加临时类名，再用CSS定位，但:has()目前已被Chrome、Firefox、Safari等主流浏览器支持。
• 浮动布局后一定要记得清除浮动，防止后续元素布局混乱，上面的方案已经包含了清除逻辑。

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