如何在 HTML 和 CSS 中使用文字換行將圖像浮動到右下角？

使用文字換行浮動圖像：綜合指南

在HTML 和CSS 中，將圖像放置在文字旁邊可能是一個挑戰，尤其是當您希望圖像浮動到右下角和環繞它的文字。本文探討如何使用 spacer 元素和 JavaScript 來實現此效果。

建立一個Spacer 元素

要將映像推送到頁面底部，請建立一個帶有float: right 的spacer 元素，高度等於內容和映像之間的差異高度：

<div class="spacer"></div>
<img  class="bottomRight" src="" alt="如何在 HTML 和 CSS 中使用文字換行將圖像浮動到右下角？" >

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中文網其他相關文章！