为什么我的div消失了？

Question

因此，我正在尝试使用具有彩色背景的div制作一个颜色块样式的页面。 仅div不显示，背景色也不显示。

理想情况下，它将是4行框（高度为200px），其中：

• 第1行2盒
• 第2行有1个盒子
• 第3行3盒
• 第4行1盒

 .Box { height: 200px; background-color: #BD2128; display: block; text-align: center; overflow: auto; margin-top: 15px; margin-bottom: 15px; } .Box h3 { color: #FFFFFF; line-height: 40px; } .Box:hover { background-color: #C0C0C0; } .DivContainer { float: left; width: 90%; margin-left: 5%; overflow: auto; height: auto; } .Whole { float: left; width: 90%; margin-left: 5%; } .Half { float: left; width: 47.5%; } .Third { float: left; width: 30%; } .Between { float: left; width: 5%; height: 10px; } 

 <div class="DivContainer"> <div class="Box Half" id="IndividualTraining"> <h3>Individual or Group Training</h3> </div> <!-- class="Half" --> <div class="Between"></div> <div class="Box Half" id="TrainingCamps"> <h3>Training Camps</h3> </div> <!-- class="Half" --> </div> <!-- class="DivContainer" --> <div class="Box Whole" id="TeamTraining"> <h3>Team Training</h3> </div> <!-- class="Whole" id="TeamTraining" --> <div class="DivContainer"> <div class="Box Third" id="TOCA for Tots"> <h3>TOCA for Tots</h3> </div> <!-- class="Third" id="TOCA for Tots" --> <div class="Between"></div> <div class="Box" class="Third" id="BirthdayParties"> <h3>Birthday Parties</h3> </div> <!-- class="Third" id="BirthdayParties"--> <div class="Between"></div> <div class="Box" class="Third" id="CorporateEvents"> <h3>Corporate Events</h3> </div> <!-- class="Third" id="CorporateEvents" --> </div> <!-- class="DivContainer" --> <div class="Box Whole" id="Futsal"> <h3>Futsal</h3> </div> <!-- class="Whole" id="Futsal" --> 

Answer 1

检查这个简化的示例... JSFiddle示例

1. <div class="DivContainer"> div已删除
2. <div class="Between"></div>间隔div已删除
3. 一个名为<div class="container">的新包装器div包括所有div，并使使用填充在所有行上模拟90％宽度变得更加容易。
4. 在“团队培训”和“五人制足球” div上使用了“清除浮动”。 清除浮动对浮动布局结构的工作很重要 。 有关更多信息，请访问此易于理解的页面http://css-tricks.com/all-about-floats/
5. CSS得到了简化，并且Container div的填充以及边距和div宽度相结合，以获得均匀的间距（等于每行100％的宽度）。

HTML

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

CSS

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

在浮动结构中可能会给您带来一些小问题的是“保证金崩溃”（可能会导致意外的顶部或底部保证金大小），以及“框模型”（Box Model），这可能会导致包含浮动div的行大于等于100％屏幕宽度，并使浮动的div向下碰撞到下一行。