Question

所以我正在尝试制作一个带有彩色背景的div的颜色块样式页面。只有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

已移除<div class="DivContainer"> div
已移除<div class="Between"></div> spacer div
一个名为<div class="container">的新包装div包含所有div，并且使用填充更容易模拟所有行的90％宽度。
A＆＃34; Clear Float＆＃34;被用于＆＃34;团队训练＆＃34;和＆＃34;五人制足球＆＃34; div的。清除浮动是重要的，以使浮动布局结构起作用。有关详细信息，请查看此易于理解的页面http://css-tricks.com/all-about-floats/
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;
}

在浮动结构中可能会给您带来小问题的事情是＆＃34;保证金崩溃＆＃34;这可能会导致意外的顶部或底部边距大小，以及＆＃34; Box模型＆＃34;这可能导致包含浮动div的行等于屏幕宽度的100％以上，并导致浮动的div向下冲到下一行。

为什么我的div消失了？

1 个答案: