如何改變使用CSS的位置

Question

我想改變SCORE的位置從右到左，從左到右或反過來，但分數的位置不應該改變。我嘗試了幾種組合和選項，但沒有幫助。

尺寸和寬度等....一切都正確定義，只是我們需要改變SCORE的位置

什麼，我試圖做的是：

實際：左得分 |左DIV中間DIV右DIV | Right Score

預計：左DIV | 左分數中檔DIV 右分數 | Right DIV

or

Actual：Left DIV | 左分中檔DIV右DIV | Right Score

預計：右DIV | 右劃痕中東DIV 左劃痕 |左DIV

或

預計：左DIV | 左劃痕中東DIV 右劃痕 |右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

整理您的標記第一和擺脫display: inline S的。然後將此概念：

鑑於

<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*/ 
}