不能正确浮动 - 到处都是盒子

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示例

Answer 2

1. 正确关闭.score-holder
2. 根据类的目的而不是外观来命名它们是一种很好的做法（.yellow-holder .second-team-holder）
3. 为什么到处都放float:left
4. 在.yellow-holder CSS定义后添加}

Answer 3

您在某些结束标记中缺少一个/，在CSS中缺少一个子}。

<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>

---

.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;
}

全部修复：http://cssdesk.com/LT5tL