右浮动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。这是span text2我已经把第一和text1我把第二。然后我得到预期的结果。我可以通过JQuery对它进行重新排序。但我不想重新排序HTML。

那么有没有什么办法可以在不重新编排HTML的情况下得到期待的结果？任何CSS解决方案？

Answer 1

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; 
} 

Answer 2

附上两个跨度标签有一个float:right标签div。

HTML：

.....

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

...

CSS：：

.content{ 
    float:right; 
} 
.pull-right{ 
    float:right; 
} 
.pull-left{ 
    float:left; 
} 

休息CSS保持相同

Answer 3

用你的右拉式类的包装用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