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..

    CSS how to get floated left text to wrap?

    How to make the opacity layer same size as img

    How to display code on iPhone using HTML/CSS

    How to give line-break from css, without using
    ?

    How do I prevent a JQuery UI menu from floating?

    How to change table cell colour to default on triple click html5/javascript/css

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How do i resize an image based on its div width? [duplicate]

    How to rotate a picture using css and javascript

    How do we add the spot bulging effect in css? [closed]

    how to run html$css$js files locally on browser [closed]

    How can I make a div *not* expand to fill it's parent?

    how do I apply a class to the header cell for a column in slickgrid

    How to get a border around this polygon?

    How can I write a complex fraction using HTML/CSS/jQuery?

    How to make the width of parent div equal to the width of child image, and height of child image to height of the parent div using CSS only

    how to show the hidden div with same properties css with jquery

    How to replace default html checkbox with just html+css and no images?

    How to set color of the Button with jQuery UI?

    How to have dots as horizontal separator with inline text like in this screenshot?

    Using SASS how to prevent a css file from being generated inside of the SASS folder?

    how to get main div container to align to centre

    How to make a dotted underline link on hover?

    how to make animate.css(plugin) work instantly on live site load?

    How To Outline a PNG (Transparent) image with CSS?

    How to add static files using Spring MVC and Thymeleaf

    How can I convince Firefox to redraw CSS Pseudo-elements?

    how to display products side by side

    How to chose which CSS rule to use from multiple style sheets

    How can I force menu items to fit to column width?