如何在 HTML 和 CSS 中使用文本换行将图像浮动到右下角？

使用文本换行浮动图像：综合指南

在 HTML 和 CSS 中，将图像放置在文本旁边可能是一个挑战，尤其是当您希望图像浮动到右下角和环绕它的文本。本文探讨了如何使用 spacer 元素和 JavaScript 来实现此效果。

创建一个 Spacer 元素

要将图像推送到页面底部，请创建一个带有 float: right 的 spacer 元素，高度等于内容和图像之间的差异高度：

<div class="spacer"></div>
<img class="bottomRight" src="" />

CSS 样式

使用以下 CSS 样式：

.spacer {
  float: right;
  width: 0px;
}
.bottomRight {
  float: right;
  clear: right;
}

计算间隔高度

要准确定位图像，您需要计算使用 JavaScript 计算间隔符的高度。该函数以 spacer 元素作为参数：

function sizeSpacer(spacer) {
  var container = spacer.parentNode;
  var img = spacer.nextElementSibling || spacer.nextSibling;
  var lastContentNode = container.children[container.children.length - 1];
  var h = Math.max(0, container.clientHeight - img.clientHeight);
  var imgBottom = img.getBoundingClientRect().bottom;
  var lastContentBottom = lastContentNode.getBoundingClientRect().bottom;

  // Adjust spacer height to align with content bottom
  while (h > 0 && imgBottom > lastContentBottom) {
    spacer.style.height = --h + "px";
    imgBottom = img.getBoundingClientRect().bottom;
    lastContentBottom = lastContentNode.getBoundingClientRect().bottom;
  }

  if (lastContentBottom > imgBottom) {
    spacer.style.height = ++h + "px";
  }
}

jQuery 插件

为了方便起见，您可以使用这个支持左下或右下浮动图像的 jQuery 插件:

$(function() {
  $(".bottomRight").bottomRight();
});

以上是如何在 HTML 和 CSS 中使用文本换行将图像浮动到右下角？的详细内容。更多信息请关注PHP中文网其他相关文章！