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

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

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

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

修复结束标记后

看起来没问题： jsfiddle example

Answer 2

正确关闭.score-holder
最好按照目的而不是外观来命名您的课程（.yellow-holder .second-team-holder）。
为什么要把float:left放在任何地方？
在} CSS定义

.yellow-holder

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

没有正确漂浮 - 到处都是盒子

3 个答案: