2016-04-28 18 views
0

スコアの位置を右から左、左から右、またはその逆に変更したいが、スコアの位置は変更しないでください。私はいくつかの組み合わせとオプションを試しましたが、助けにはなりませんでした。CSSを使用して位置を変更する方法

SIZEとWIDTHとなどが....すべてが正しく定義されている、唯一の私たちは、私が何をしようとしているSCOREの位置

を変更する必要がある:

実際:左スコア |左DIV中央DIV右DIV | 右スコア

期待:左のDIV | 左スコア中DIV 右スコア |右DIV

または

実際:左DIV | 左スコア中DIV右DIV | 右スコア

期待通り:右のDIV | 中央DIV スコアスコア|左DIV

または

予想:左DIV |第一及びdisplay: inline Sを取り除くのTidyマークアップを右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/

+2

理由だけではなく、これは彼らが左ミドルから右になり

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

を考えると

HTMLを変更してください...確かにこれはCSSが解決すべきものではありませんか? –

+0

フレックスボックスを見て注文しましたか? https://css-tricks.com/almanac/properties/o/order/ – coopersita

答えて

1

を| 左右スコア中東DIV スコア。そして、この概念を適用します。

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

そして、これは右ミドル、左:

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

私はスコアに集中しています。スコアは内側にある必要があります。 – user1614862

+0

内部要素を浮かべて、同じ概念で簡単に達成することもできます。 – Gabriel

関連する問題