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>

问题是黄色支架没有漂浮在白色支架下方，而是向右移动。

有人可以看到原因吗？

谢谢

最佳答案

“ score-holder”的语法可能存在问题

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

结束的<div>标记没有结束标记斜杠（/）

固定结束标签后，看起来就可以了：jsfiddle example

关于html - 漂浮不正常-到处都有盒子，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8810999/