So ändern Sie die Position mit CSS

Question

Ich möchte SCORE Position von rechts nach links und von links nach rechts ändern oder umgekehrt, aber Score-Position sollte nicht ändern. Ich habe mehrere Kombinationen und Optionen ausprobiert, aber es hat nicht geholfen.

Größe und Weite und etc .... alles korrekt definiert sind, nur müssen wir die Position von SCORE ändern

, was ich versuche zu tun:

Aktuell: Linke Ergebnis | Links DIV Mittel DIV Rechts DIV | Rechte Punktzahl

Erwartet: Links DIV | Linke Bewertung Mitte DIV Rechte Punktzahl | Rechts DIV

oder

Aktuell: Left DIV | Linke Punktzahl Mitte DIV Rechts DIV | Rechte Punktzahl

Erwartet: Right DIV | Rechts Ergebnis Mittel DIV links Score | Links DIV

oder

Erwartet: Left DIV | links Ergebnis Middle DIV Recht Score | Recht DIV

div.team-info.team-pre-info.lpanel.Soccer 
 
div.team-info.team-final-in-info.lpanel.Soccer 
 
div.score-box.score-box-home.Soccer { 
 
    \t float:right; 
 
} 
 

 
div.team-info.team-pre-info.rpanel.Soccer 
 
div.team-info.team-final-in-info.rpanel.Soccer 
 
div.score-box.score-box-home.Soccer { 
 
    \t float:left; 
 
}

<div style="color:#0000FF;width:500px"> 
 

 
    <div class="team-info team-pre-info lpanel Soccer" style="display:inline;"> 
 
    Left DIV </div> 
 
    <div class="score-box score-box-home Soccer" style="display:inline";> | Left Score</div> 
 
    
 

 

 
<div style="display:inline;"> 
 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Middle DIV&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
    </div> 
 

 

 

 
<div class="team-info team-pre-info rpanel Soccer" style="display:inline;"> 
 
Right DIV </div> 
 
<div class="score-box score-box-way Soccer" style="display:inline"; >  
 
| Right Score </div> 
 

 
    </div> 
 

https://jsfiddle.net/wf2y7m01/

Answer 1

Tidy Markup erster und werden die display: inline s los. Dann dieses Konzept anwenden:

Gegeben

<div class="a">Left DIV</div> 
<div class="a">Middle DIV</div> 
<div class="a">Right DIV</div> 

Diese sie links Mitte-Recht macht:

.a { 
float: left; 
width: 33%; /*or something else*/ 
} 

Und dieses Recht-Mitte-links:

.a { 
float: right; 
width: 33%; /*or something else*/ 
}