html - 如何在 img 之后移动跨度？

Question

我有一些自动生成的 HTML，我想知道如何在图像后移动一个 span。

这是HTML

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

因此，如果您注意到跨度在前，然后是 img。

我需要它所以它呈现，相反像这样

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

正如我所说，我无法触及 HTML，它是自动生成的，但我认为有一个 CSS 技巧可以解决这个问题吗？

编辑

我忘了说这两个元素被包裹在一个 <div> 中.

即:

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

Answer 1

你可以Adjacent sibling selectors从span的 Angular ，改变图片的display和float规则。

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>

另一种选择是使用 flex 布局并像这样更改元素的顺序:

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>