如何用Tailwind CSS与@tailwind/typography非Flexbox实现标题两侧配图？

方案一：保留.prose下h2与img同级结构 #

无需修改现有DOM结构，通过CSS选择器实现交替布局：

1. 给.prose容器预留图片显示空间，避免图片超出容器边界：

.prose {
  padding-left: 120px; /* 根据实际图片宽度调整 */
  padding-right: 120px;
}

或直接用Tailwind内联类：

<div class="prose pl-32 pr-32">...</div>

2. 设置h2为相对定位，作为图片的定位基准：

.prose h2 {
  position: relative;
  padding-left: 0; /* 覆盖typography插件默认内边距，防止文本被遮挡 */
}

3. 用奇偶选择器+相邻兄弟选择器实现图片交替左右定位，同时通过通用方式垂直居中（无需手动计算偏移量）：

/* 奇数h2后的图片置于左侧，贴紧容器边框 */
.prose h2:nth-of-type(odd) + img {
  position: absolute;
  left: -110px; /* 配合prose的padding-left调整，确保贴紧红色边框 */
  top: 50%;
  transform: translateY(-50%);
  width: 100px; /* 自定义图片宽度 */
  height: auto;
}

/* 偶数h2后的图片置于右侧，贴紧容器边框 */
.prose h2:nth-of-type(even) + img {
  position: absolute;
  right: -110px; /* 配合prose的padding-right调整 */
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: auto;
}

方案二：h2相对定位包裹绝对定位img结构 #

允许微调DOM结构时，将img嵌套进h2内，布局控制更精准：

1. 调整后的DOM结构：

<div class="prose">
  <h2 class="relative">
    标题文本
    <img src="your-image.jpg" alt="图片描述">
  </h2>
  <h2 class="relative">
    另一标题文本
    <img src="another-image.jpg" alt="图片描述">
  </h2>
</div>

2. 用CSS实现自动交替定位：

.prose h2 img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: auto;
}

/* 奇数h2内的图片居左 */
.prose h2:nth-of-type(odd) img {
  left: -110px; /* 贴紧容器红色边框 */
  right: auto;
}

/* 偶数h2内的图片居右 */
.prose h2:nth-of-type(even) img {
  right: -110px; /* 贴紧容器红色边框 */
  left: auto;
}

关键注意事项 #

• 统一图片尺寸，或根据实际图片大小调整容器padding和图片定位的数值，确保不与标题文本重叠
• 覆盖@tailwind/typography插件对h2的默认内边距，避免标题内容被图片遮挡
• top:50% + transform: translateY(-50%)是通用垂直居中方案，适配任意高度的h2，无需逐个计算偏移量

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