How Can I Float an Image to the Bottom Right with Text Wrap in HTML and CSS?

Floating Images with Text Wrap: A Comprehensive Guide

In HTML and CSS, positioning images beside text can be a challenge, especially when you want the image to float to the bottom right and the text to wrap around it. This article explores how to achieve this effect using a spacer element and JavaScript.

Create a Spacer Element

To push the image to the bottom of the page, create a spacer element with float: right and a height equal to the difference between the content and image heights:

<div class="spacer"></div>
<img  class="bottomRight" src="" alt="How Can I Float an Image to the Bottom Right with Text Wrap in HTML and CSS?" >

CSS Styles

Use the following CSS styles:

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

Calculating the Spacer Height

To accurately position the image, you'll need to calculate the spacer's height using JavaScript. This function takes the spacer element as an argument:

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 Plugin

For convenience, you can use this jQuery plugin that supports floating images bottom left or right:

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

The above is the detailed content of How Can I Float an Image to the Bottom Right with Text Wrap in HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!