跨越彼此

Question

我想让这些跨度相互叠加，但不是那么幸运，

http://jsfiddle.net/76NNp/79/

<td class="rtf hov">
    <div>Investment</div>
    <div class="mub eub">
        <span style="float:left">Test</span>
        <span style="float:right;">I want to be on Top</span>
        <span style="float:right; color:green">I want to be on bottom</span>
    </div>
</td>

期望的结果，

Answer 1

尝试这种方式

<强>的CSS

.left{
    float:left;
}
.right{
    float:right;
}
.clr{
    clear:both;
}

<强> HTML     

<div class="msub estextsub">
    <span class="left">Investment</span>

    <span  class="right">I want to be on Top</span>
    <div class="clr"></div>
     <span  class="left">Test</span>
    <span  class="right">I want to be on bottom</span>
</div>

Demo

Answer 2

如何使用位置 - 就像这里一样 http://jsfiddle.net/76NNp/87/

<span style="position:absolute;top:0; right:0">I want to be on Top</span>
<span style="position:absolute;bottom:0; right:0">I want to be on bottom</span>

Answer 3

添加清晰：两者都在两个范围内。这是工作代码：

.rtddef {
    padding: 10px 0 10px 10px;
    vertical-align: top;
}

<td class="rtddef es1hov">
    <div>Investment</div>
    <div class="msub estextsub">
        <span style="float:left">Test</span>
        <span style="float:right;clear:both;">I want to be on Top</span>
        <span style="float:right; color:green;clear:both;">I want to be on bottom</span>
    </div>
</td>