How to move a span after an img?


Tags: html,css,css3

Problem :

I have some html which is automatically generated and I would like to know how to move a span after the image. can anyone help ?

Here is the HTML

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

So if you notice that the span comes first and then the img.

I need it so it renders, the opposite like so

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

As i say i can't touch the HTML, its automatically generated but I think there is a CSS trick to get around this right ?

EDIT

I forgot to mention that these two elements are wrapped in a <div>.

So i.e:

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


Solution :

You can you the Adjacent sibling selectors from the span point of view and change the image display and float rules.

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

/* clarfix 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>

Another option would be to use a flex layout and change the order of your elements like so:

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>


    CSS Howto..

    How to make an equal distance between elements footer?

    How to do a workaround in css that removes spacing in footer of navigator7 vaadin addon

    How to use CSS to make this works on retina screen?

    How to add tooltip to image on hover with CSS

    How can I make responsive JQuery left margin?

    How do i place 4 headers from 1 div next to each other?

    How do you use csslint from the command line?

    html css - how to create multiple column list?

    How to embedded all resources(css,js,images) into one single html file?

    How to align this CSS menu to the right of its containing div?

    How to add html classes to a Django template 'for-loop' dynamically?

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    HTML, CSS - image inside image, how to do that?

    How can my css div with the display flex property be alignd to the right when it's wrapping?

    how to create css shapes X which has to be background inside? [closed]

    How can I change the selection text background using CSS?

    How to edit a pseudo element on focus using css or jQuery

    How can I force an image to be no larger than the section it's in?

    How much media queries?

    How would I write css to access the following class “total total_plus hidden_elem” or “total total_plus”?

    How to use a custom image for cursor/thumb in html input type range

    How does max-width property make images responsive?

    How to get background image/ image to stretch to fill container via CSS?

    How to make a conjoined input with flexible width

    How Do I Get A Border From YUI GRID Tool?

    How to create border around jquery mobile webpage?

    How to change visibility of Calendar on textbox click

    How to set the CSS of an img inside a li inside a ul inside a class?

    How to keep css id to the 'li' in css

    How can I change CSS style definition to make border on specific div