Html 不'；不要适当地漂浮——到处都是盒子

我有以下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>

0
0

问题是，黄色的支架不会浮在白色支架的下方，它会向右移动

有人能看出原因吗

---

谢谢

关于“分数持有者”的语法可能存在问题

0

结束标记没有结束标记斜杠（

/

）

结束标记修复后看起来正常：

正确关闭

.score holder

根据课程的目的而不是外观来命名课程是一种很好的做法（

.yellow holder

.second team holder

）

为什么要将

float:left

放在所有地方

在

之后添加
}
。黄色支架

CSS定义

---

在某些结束标记中缺少一个

/

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

---

全部修复：

我花了很长时间跟踪该代码片段的错误，但仍然没有注意到这一点。真烦人！

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