因此,我正在尝试使用带有彩色背景的 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" -->
最佳答案
检查这个简化的例子... JSFiddle Example
<div class="DivContainer">
div 已删除<div class="Between"></div>
间隔 div 已删除- 一个名为
<div class="container">
的新包装 div包括所有 div,并且可以更轻松地使用填充在所有行上模拟 90% 的宽度。 - “团队训练”和“五人制足球”div 使用了“Clear Float”。清除 float 对于 float 布局结构的工作很重要。有关更多信息,请查看此易于理解的页面 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;
}
在 float 结构中可能会给您带来小问题的是“边距折叠”,它可能会导致意外的顶部或底部边距大小,以及“盒模型”可能会导致包含 float div 的行等于大于屏幕宽度的 100%,并使 float 的 div 向下移动到下一行。
关于html - 为什么我的 div 消失了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28080403/