html - 为什么我的 div 消失了？

Question

因此，我正在尝试使用带有彩色背景的 div 制作一个色 block 样式的页面。只有 div 不显示，它们的背景颜色也不显示。

理想情况下，它将是 4 行框(高度为 200 像素)，其中:

• 第 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 Example

1. <div class="DivContainer"> div 已删除
2. <div class="Between"></div>间隔 div 已删除
3. 一个名为 <div class="container"> 的新包装 div包括所有 div，并且可以更轻松地使用填充在所有行上模拟 90% 的宽度。
4. “团队训练”和“五人制足球”div 使用了“Clear Float”。清除 float 对于 float 布局结构的工作很重要。有关更多信息，请查看此易于理解的页面 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;
}

在 float 结构中可能会给您带来小问题的是“边距折叠”，它可能会导致意外的顶部或底部边距大小，以及“盒模型”可能会导致包含 float div 的行等于大于屏幕宽度的 100%，并使 float 的 div 向下移动到下一行。