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

Floating an Image to the Bottom Right with Text Wrapping

Floating Image with Fixed Dimensions

Floating an image to the bottom of the page while text wraps around it can be achieved with a combination of CSS and HTML. To ensure alignment to the bottom of the page, create a "spacer" element with the following attributes:

<div class="spacer"></div>

Within the CSS, give the spacer the following properties:

.spacer {
    float: right;
    height: calc(100% - ImageHeight); /* Adjust the height to match the content */
    width: 0px;
}

Next, apply the CSS properties to the image:

<img  class="bottomRight lazy" src="/static/imghwm/default1.png" data-src="..." alt="How Can I Float an Image to the Bottom Right with Text Wrapping in CSS and JavaScript?" >

.bottomRight {
    float: right;
    clear: right;
}

JavaScript for Variable Content Height

For responsive designs where the content height varies, JavaScript can be used to calculate the spacer height dynamically:

function sizeSpacer(spacer) {
    spacer.style.height = 0;
    // Calculate spacer height based on content and image dimensions
    spacer.style.height = h + "px";
}

Call the sizeSpacer function on document ready and window resize events.

jQuery Plugin

A jQuery plugin can be created to simplify the process, allowing for floating images to the bottom left or right, and specifying the element to align with.

Conclusion

By utilizing a spacer element, floating the image, and clearing its right space, we can successfully float an image to the bottom right while wrapping text around it. This approach works well for fixed image dimensions, and JavaScript can be used for dynamic content heights.

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