如何使用 CSS 改变位置

Question

我想将 SCORE 位置从右到左和从左到右更改，反之亦然，但得分位置不应更改。我尝试了几种组合和选项，但没有帮助。

SIZE 和 WIDTH 等....都定义正确，只是我们需要改变 SCORE

的位置

我想做的是：

实际：剩余得分 |左DIV 中DIV 右DIV | 正确得分

预期：左侧 DIV | 左分中分DIV右分 |右DIV

或

实际：左侧 DIV | 左分中分DIV右分DIV | 正确得分

预期：正确 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 {
  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 {
  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。然后应用这个概念：

给出

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

如何使用 CSS 改变位置

How to change position using CSS

html

css

css-position

css-float