Tips for rearranging a span following an image?

Question

Tips for rearranging a span following an image?

Looking for a solution to rearrange a span element after an image within automatically generated HTML.

Sample HTML:

<span>closed</span> <img alt="Click to reset" src="xxx" class="">

Currently, the span appears before the img in the code snippet provided.

The desired output is to have the img render first, followed by the span like this:

<img alt="Click to reset" src="xxx" class=""> <span>closed</span>

Although unable to directly edit the HTML, wondering if there is a CSS workaround solution?

Edit

It should be noted that both elements are enclosed within a <div>.

For example:

<div><span>closed</span> <img alt="Click to reset" src="xxx" class=""></div>

html css

Answer 1

Answer №1

If you look at it from the perspective of the span element, you can utilize the Adjacent sibling selectors to modify the display and float properties of the image.

div span + img { 
  display: block;
  float: left;
}

/* clear fix the float */
div:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}

<div>
  <span>closed</span>
  <img alt="Click to reset" src="http://lorempixel.com/100/100/food" class="" />   
</div>

Alternatively, you could opt for a flex layout approach and reorder your elements like this:

div {
    display: flex;
    align-content: flex-start;
}

span { 
    order: 1;
    align-self: flex-end;
}

<div>
  <span>closed</span>
  <img alt="Click to reset" src="http://lorempixel.com/100/100/food" class="" />   
</div>

Answer 2

If you look at it from the perspective of the span element, you can utilize the Adjacent sibling selectors to modify the display and float properties of the image.

div span + img { 
  display: block;
  float: left;
}

/* clear fix the float */
div:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}

<div>
  <span>closed</span>
  <img alt="Click to reset" src="http://lorempixel.com/100/100/food" class="" />   
</div>

Alternatively, you could opt for a flex layout approach and reorder your elements like this:

div {
    display: flex;
    align-content: flex-start;
}

span { 
    order: 1;
    align-self: flex-end;
}

<div>
  <span>closed</span>
  <img alt="Click to reset" src="http://lorempixel.com/100/100/food" class="" />   
</div>

Answer 3

Answer №2

For those open to utilizing jQuery, here's a technique you could implement:

$(function(){
    $('span').insertAfter($('img'));
});

Alternatively, using CSS, you can achieve the desired result by:

span{
    float:right;
}
img{
    float:left;
}

Answer 4

For those open to utilizing jQuery, here's a technique you could implement:

$(function(){
    $('span').insertAfter($('img'));
});

Alternatively, using CSS, you can achieve the desired result by:

span{
    float:right;
}
img{
    float:left;
}

Answer 5

Answer №3

Here's another potential approach:

section { display: grid; }
img{ display: grid-header-group; }
span { display: grid-footer-group; }

demo

Answer 6

Here's another potential approach:

section { display: grid; }
img{ display: grid-header-group; }
span { display: grid-footer-group; }

demo

Tips for rearranging a span following an image?

Edit

Answer №1

Answer №2

Answer №3

Similar questions

Angular - Acquire reference to the <audio> element

Suggestions for creating a <div> that takes up the entire space when using the display property set to flex

What is the best way to contain the CSS for dynamically generated HTML within a div element without impacting other elements on the page?

Avoid using the FONT tag with the execCommand function

What is the method for opening the image gallery in a Progressive Web App (PWA)?

Revamp the UI Framework's CSS to accommodate the latest Web Components

iOS 7.0.x causing issues with the height of tabs being trimmed

Eliminate spaces between divs without any margins or padding

"Arranging elements with identical class in a single column but on separate rows using CSS grid - a step-by-step guide

Leveraging backstretch.js in combination with blur.js (or equivalent)

What is the best way to send an HTML report through email with embedded images as an attachment?

Is there a way to fix the issue of ContextMenu not appearing at the right position within a scrollable

Disable button with Checkbox Javascript functionality

Identifying and categorizing flip switches with jQuery without relying on div elements

What mechanism does angularjs employ to detect the $dirty state in the absence of a form tag?

Add color to the cells within the table

What is the best way to align text to the left without causing it to wrap to the next line?

The Google map is not showing up on the screen despite having entered the API Key

How do I effectively replace content with a banner or alert message for users experiencing issues with the website on Internet Explorer?

Maintaining Styles After Focus is Removed in CSS: A Guide