漂浮在同一直线的2个跨度上，但需要第一个跨度在左侧

Question

这是我的HTML代码

<span class="pull-right red">Text 1</span>
<span class="pull-right green">Text 2</span>

我的CSS是

.pull-right{
    float:right;
}
.red{
    color:red;
}
.green{
    color:green;
}

将文字1 与最右边的线条对齐。我希望第一个跨度（即文本1 ）与第二个跨度左对齐。

Here is JSFiddle Link.

在案例1中，我提供了我的HTML。

在案例2中，我重新排序了HTML。这是我首先放的text2和第二个text1。然后我得到了预期的结果。我可以通过JQuery重新排序。但我不想重新排序HTML。

那么有什么方法可以在不重新排序HTML的情况下获得期望的结果吗？任何CSS解决方案？

Answer 1

将两个span标记括在div的{​​{1}}标记中。

<强> HTML ：

.....

float:right

...

<强> CSS：：

<div class = "content">
  <span class="pull-left red">Text 1</span>
  <span class="pull-right green">Text 2</span>
</div>

Rest CSS保持不变

Answer 2

在包装div上使用右拉类：

<div class="pull-right">
  <span class="red">Text 1</span>
  <span class="green">Text 2</span>
</div>

使用相同的css：

.pull-right{
    float:right;
}
.red{
    color:red;
}
.green{
    color:green;
}

Working fiddle

Answer 3

HTML

  <div class="main">
     <span class="red">Text 1</span>
     <span class="green">Text 2</span>
  </div>

CSS：

.main
{
    float:right;
}

.red
{
    color:red;
}
.green
{
    color:green;
}