Html 为什么我的div出现了问题？

因此，我尝试用带有彩色背景的div创建一个色块样式的页面。只有div不显示，其背景色也不显示

理想情况下，它将是4排盒子（高度为200px），带有：

• 第1排有2个箱子
• 第2行1个方框
• 第3排有3个箱子
• 第4行1个方框

.Box{
高度：200px；
背景色：#BD2128；
显示：块；
文本对齐：居中；
溢出：自动；
边缘顶部：15px；
边缘底部：15px；
}
.框h3{
颜色：#FFFFFF；
线高：40px；
}
.Box:悬停{
背景色：#C0；
}
.DivContainer{
浮动：左；
宽度：90%；
左缘：5%；
溢出：自动；
高度：自动；
}
.全部{
浮动：左；
宽度：90%；
左缘：5%；
}
.一半{
浮动：左；
宽度：47.5%；
}
.第三{
浮动：左；
宽度：30%；
}
.中间{
浮动：左；
宽度：5%；
高度：10px；
}

个人或团体培训
训练营
团队训练
托卡
生日聚会
公司活动
五人制

检查此简化示例

已删除

div

拆下了

间隔垫圈div

一个名为

的新包装器div包含所有div，使使用填充在所有行上模拟90%的宽度变得更容易

在“团队训练”和“五人制”跳水比赛中使用了“透明浮标”。清除浮动对于浮动布局结构的工作非常重要。有关更多信息，请查看此易于理解的页面

CSS被简化，来自容器div的填充以及边距和div宽度结合在一起，以获得均匀的间距（等于每行100%的宽度）

HTML

---

浮动结构中可能会出现一些小问题，如“边距折叠”，这可能会导致意外的顶部或底部边距大小，以及“框模型”，这可能会导致包含浮动div的行超过屏幕宽度的100%，并使浮动的div向下跳到下一行。

我在这里将代码粘贴到一个JSFIDLE中，它似乎工作得很好。从这里开始，JSFIDLE中的第3行有2个框而不是3个框，第3个框向下跳到下面的新行。

<div class="container">

<div class="Box Half left" id="IndividualTraining">
<h3>Individual or Group Training</h3>
</div>

<div class="Box Half left" id="TrainingCamps">
<h3>Training Camps</h3>
</div>

<div class="Box Whole clear-float" id="TeamTraining">
<h3>Team Training</h3>    
</div>


<div class="Box Third left" id="TOCA for Tots">
<h3>TOCA for Tots</h3>
</div>

<div class="Box Third left" id="BirthdayParties">
<h3>Birthday Parties</h3>
</div>

<div class="Box Third left" id="CorporateEvents">
<h3>Corporate Events</h3>
</div>

<div class="Box Whole clear-float" id="Futsal">
<h3>Futsal</h3>
</div>

.container {
    padding:2% 5% 0% 5%;
    margin:0;
    border:0;
}
.Box {
    height:200px;
    background-color:#BD2128;
    text-align:center;
    padding:0;
    border:none;
    margin:0% 1% 2% 1%;
}
.Box h3 {
    color:#FFFFFF;
    line-height:40px;
}
.Box:hover {
    background-color:#C0C0C0;
}
.Whole {
}
.Half {
    width:48%;
}
.Third {
    width:31.3%;
    margin-top:0%;
}
.left {
    float:left;
}
.clear-float {
    clear:both;
}