Question

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

这是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

如果您愿意使用jQuery，可以使用此方法

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

或使用css，您可以使用

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

Answer 2

您可以从跨度的角度来看Adjacent sibling selectors，并更改图片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>

Answer 3

另一种可能的方法：）

div { display: table; }
img{ display: table-header-group; }
span { display: table-footer-group; }

example

如何在img之后移动跨度？

修改

3 个答案: