Как изменить позицию с помощью CSS

Question

Я хотел бы изменить положение SCORE справа налево и влево или вправо или наоборот, но позиция позиции не должна меняться. Я попробовал несколько комбинаций и вариантов, но это не помогло.

SIZE и WIDTH и т.д .... все правильно определены, только нам нужно изменить положение SCORE

, что я пытаюсь сделать, это:

Фактический: левый Оценка | Left DIV Middle DIV Right DIV | Право Счет

Ожидаемый: Левый DIV | Показатель слева Средний DIV Правый рейтинг | Правый DIV

или

Фактический: левый DIV | Показатель слева Средний DIV Правый DIV | Право Счет

Ожидаемый: правый DIV | правого Score Средних ДИВ левого Score | Левая ДИВ

или

Ожидаемое: слева DIV | левого Score Среднего DIV правого Score | Правого 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 разметка первый и избавиться от display: inline с. Затем применить эту концепцию:

Учитывая

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

Это делает их левый средний-правый:

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

И это правый средний левый:

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