は適切に浮きません - どこでもボックス

Question

私は次のCSSを持っている：

.horizontal-holder1{ 
float:left; 
width:88px; 
height:98px; 
margin-bottom:15px; 
border:1px solid #bdbdbd; 
background-color:grey; 
} 
.white-holder{ 
width:88px; 
height:49px; 
background-color:white; 
float:left; 

.yellow-holder{ 
width:88px; 
height:49px; 
background-color:#FFF8DC; 
float:left; 
} 
.player-holder{ 
width:60px; 
height:49px; 
float:left; 
} 
.score-holder{ 
width:28px; 
height:49px; 
float:left; 
} 

そして、次のHTML：

<div class="horizontal-holder1"> 
    <div class="white-holder"> 
     <div class="player-holder"> 
      <? echo $data['username']; ?> 
     </div> 
     <div class="score-holder"> 
      0 
     <div> 
    </div> 
    <div class="yellow-holder"> 
     <div class="player-holder"> 
      <? echo $data['username']; ?> 
     </div> 
     <div class="score-holder"> 
      0 
     <div> 
    </div> 
</div> 

問題は黄色の保有者が白の下に浮いていないということですホルダー、それは右に行く。

誰でもこの理由を見ることができますか？ 「スコア・ホルダー」の構文で

おかげ

Answer 1

可能問題

<div class="score-holder"> 
    0 
<div> 

閉じ<div>タグには終了タグのスラッシュ（/）

は、エンドたら大丈夫に見えませんでしたタグは固定されています：jsfiddle example

Answer 2

1. 正しく閉じる.score-holder
2. クラスを外観（.yellow-holder.second-team-holder）以外の目的で名前を付けることをお勧めします。
3. なぜfloat:leftをどこに置いていますか？
4. あなたの終了タグの一部で/を逃し、そしてあなたのCSSで}いる}.yellow-holder後のCSSの定義

Answer 3

を追加します。

---

.horizontal-holder1{ 
float:left; 
width:88px; 
height:98px; 
margin-bottom:15px; 
border:1px solid #bdbdbd; 
background-color:grey; 
} 
.white-holder{ 
width:88px; 
height:49px; 
background-color:white; 
float:left; 
} /* whoops! */ 
.yellow-holder{ 
width:88px; 
height:49px; 
background-color:#FFF8DC; 
float:left; 
} 
.player-holder{ 
width:60px; 
height:49px; 
float:left; 
} 
.score-holder{ 
width:28px; 
height:49px; 
float:left; 
} 

<div class="horizontal-holder1"> 
    <div class="white-holder"> 
     <div class="player-holder"> 
      <? echo $data['username']; ?> 
     </div> 
     <div class="score-holder"> 
      0 
     </div> <!-- here --> 
    </div> 
    <div class="yellow-holder"> 
     <div class="player-holder"> 
      <? echo $data['username']; ?> 
     </div> 
     <div class="score-holder"> 
      0 
     </div> <!-- and here! --> 
    </div> 
</div> 

すべての固定：私はそれに気づかなかった、まだそのコードスニペットにエラーを追跡し、長い時間を費やしてきたし、 http://cssdesk.com/LT5tL