td内に2つのスパンを整列する - 1つは左と1つ右

Question

私はテーブルを持っています。インサイドTDの私は2個のspanタグを持っている - 私は左を揃えたい1つのspanタグ、およびその他の権利は、しかし、TDはそれを許可しない：

<table> 
    <tr> 
    <td colspan="5"><span>$</span><span>1000</span></td> 
    </tr> 
</table> 

は、だから私は $がに整列させたいですfar は、tdのと、となり、tdの の右に揃えられます。

これは可能ですか？

Answer 1

余分なクラスを使用せずに、次のセレクタを使用することができます：

td span:last-child{ /*not compatible with <=IE8*/ 
    color:green; 
    float:right; 
} 

デモ：http://jsfiddle.net/QR3kP/1/ IE7との互換性のため

---

及びアップ以下CSSコードを使用する：別のアプローチは、右側にあるhttp://jsfiddle.net/QR3kP/4/

---

：

td span{ 
    float:right; 
} 
td span:first-child{ /* compatible to >=IE7 */ 
    float:left; 
} 

がデモテキストをの内側に揃えます。とfloat最初<span>：

td { 
    text-align:right 
} 
td span:first-child { 
    float:left; 
} 

デモ：http://jsfiddle.net/QR3kP/29/

---

あなたも少ないCSS宣言を使用して、上記と同様の方法を使用することができますで

td span:first-child + span { 
    float:right; 
} 

を上記の例では、デフォルトのtdのテキストアライメントが残されていて、直前にある兄弟最初のspanの後に譲渡された。それでは、それは右にfloatです。もちろん、~セレクタを使用することもできます。この場合、の場合はと同じです。

デモ：http://jsfiddle.net/QR3kP/32/

---

は、ここで互換性チャートを参照してください。そこに答えがたくさんhttp://www.w3.org/TR/CSS2/selector.html

Answer 2

最も簡単な方法は、浮動小数点数でそれをやってオフおそらく最高の右

http://jsfiddle.net/L3QU2/1/

<table width="100%"> 
    <tr> 
    <td colspan="5"> 
     <span style="float:left">$</span> 
     <span style="float:right">1000</span></td> 
    </tr> 
</table> 

Answer 3

に左に最初の2つ目をフロートすることです。

<td colspan="5"><span class="left">$</span><span class="right">1000</span></td> 

CSS：

.left { 
    float: left 
} 

.right { 
    float: right; 
} 

jsFiddle：http://jsfiddle.net/NLZU5/

Answer 4

はこれを試してみてください：

<table style="width:100%"> 
    <tr> 
    <td colspan="5"><span style="float:left;">$</span><span style="float:right;">1000</span></td> 
    </tr> 
</table> 

DEMO

Answer 5

ドル金額を含むspanに$、float: rightを含むfloat: leftを設定することができます。

ここには簡単なdemoがあります。

Answer 6

CSSクラスを使用してスパンにfloatスタイルを定義できます。

<style> 
    .left { float: left; } 
    .right { float: right; } 
</style> 

<table> 
    <tr> 
    <td colspan="5"> 
     <span class="left">$</span> 
     <span class="right">1000</span> 
    </td> 
    </tr> 
</table> 

Answer 7

スパンのそれぞれにクラスを配置し、それぞれにフロートを適用することであろう最善の方法は、クラスをotの

HTML

<span class="left">$</span><span class="right">1000</span> 

CSS

.left{float:left;} 
.right{float:right;}