Richten Sie zwei Spannen innerhalb eines TD aus - eine linke und eine rechte

Question

Ich habe eine Tabelle. Im Inneren des TDs Ich habe zwei Span-Tags - die ein span-Tag i links ausgerichtet werden soll, und das andere rechts, aber die td erlauben nicht, dass:

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

Deshalb möchte ich die $ zu ausgerichtet werden die weit links der td und die auf die weit rechts der td ausrichten.

Ist das möglich?

Answer 1

Sie können den folgenden Selektor verwenden, ohne zusätzliche Klassen zu verwenden:

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

Demo: http://jsfiddle.net/QR3kP/1/

---

Für die Kompatibilität mit IE7 und bis unter den CSS-Code verwenden:

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

Demo: http://jsfiddle.net/QR3kP/4/

---

Ein weiterer Ansatz für richtig Richte den Text innerhalb deraus nurund float die erste <span>:

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

Demo: http://jsfiddle.net/QR3kP/29/

---

Sie ein ähnliches Verfahren mit der obigen Erklärungen mit noch weniger CSS verwenden können:

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

In der Beispiel oben, der Standard td Textausrichtung ist links und Sie wählen nur die Geschwister, die sofort vor ist nach der ersten span abgetreten. Dann sind Sie nur float es auf der rechten Seite. Natürlich können Sie den ~ Selektor verwenden, der in diesem Fall ist.

Demo: http://jsfiddle.net/QR3kP/32/

---

Siehe Kompatibilitätstabelle hier: http://kimblim.dk/css-tests/selectors/

Siehe die CSS-Selektoren hier: http://www.w3.org/TR/CSS2/selector.html

Answer 2

einfachste Weg ist die erste nach links und die zweite nach rechts

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

Wahrscheinlich am besten aus es zu tun mit Schwimmern zu schweben.

<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

Versuchen Sie folgendes:

<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

Sie können auf dem span setzen, der $ enthält, und float: right auf dem span, der Ihren Dollarbetrag enthält.

Hier ist eine einfache demo davon.

Answer 6

Sie können den Stil float für die Spannen mit CSS-Klassen definieren.

<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

Der beste Weg, um eine Klasse auf jede der Spannweiten zu platzieren wäre und den Schwimmer gelten jeweils die Klassen ot

HTML

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

CSS

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