如何无需修改HTML，将图片与最后一段文本左下对齐且不增段落间距？

嘿，我来帮你搞定这个布局难题！

你之前尝试的绝对定位方案会让图片脱离文档流，导致文本没法环绕它；而普通的float又没法精准把图片定位到第三段的左下位置。不过不用改HTML结构，我们有两种可行的方法：

方法一：纯CSS（灵活度稍低，但无需JS） #

这个方案利用绝对定位和内边距来让文本避开图片，同时满足你对位置和间距的要求：

div {
  position: relative;
  max-width: 800px; /* 可根据需求调整容器宽度 */
}

p {
  margin: 0 0 1em 0; /* 保留默认段落间距，确保段落间没有额外空隙 */
  line-height: 1.5;
}

p:last-child {
  margin-bottom: 0; /* 最后一段不需要底部间距 */
}

img {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-right: 1em; /* 给图片右侧留文本间距 */
  z-index: -1; /* 让文本显示在图片上方，避免被覆盖 */
}

/* 让前两段文本避开图片区域，实现"右移"效果 */
p:not(:last-child) {
  padding-left: 160px; /* 图片宽度150px + 10px间距 */
}

这个方案的好处是不用JS，但需要提前知道图片的宽度，适合图片尺寸固定的场景。

方法二：JS + CSS（更灵活，适配动态内容） #

如果图片或文本长度可能变化，用JS计算位置会更精准，同时能实现文本环绕的效果：

首先是基础CSS：

div {
  position: relative;
  max-width: 800px;
  overflow: hidden; /* 确保shape-outside生效 */
}

p {
  margin: 0 0 1em 0;
  line-height: 1.5;
}

p:last-child {
  margin-bottom: 0;
}

img {
  position: absolute;
  margin-right: 1em;
}

然后是JS代码：

function adjustImagePosition() {
  const img = document.querySelector('img');
  const thirdPara = document.querySelector('p:last-child');
  const parentDiv = img.closest('div');

  if (!img || !thirdPara) return;

  // 计算图片应该处于的位置：左下角对齐第三段文本的左下角
  const paraBottom = thirdPara.offsetTop + thirdPara.offsetHeight;
  const imgTop = paraBottom - img.offsetHeight;
  const imgLeft = thirdPara.offsetLeft;

  // 设置图片位置
  img.style.top = `${imgTop}px`;
  img.style.left = `${imgLeft}px`;

  // 使用shape-outside让文本环绕图片
  parentDiv.style.shapeOutside = `polygon(
    ${imgLeft}px ${imgTop}px,
    ${imgLeft}px ${paraBottom}px,
    ${imgLeft + img.offsetWidth}px ${paraBottom}px,
    ${imgLeft + img.offsetWidth}px ${imgTop}px
  )`;
}

// 页面加载时执行，窗口 resize 时重新计算
window.addEventListener('load', adjustImagePosition);
window.addEventListener('resize', adjustImagePosition);

这个方案会自动计算第三段的位置，把图片精准定位到它的左下角，同时通过shape-outside让所有段落的文本自然环绕图片，完全满足你的需求。

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