為什么我的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向下碰撞到下一行。