[英]Why are my divs dissappearing?
So I'm trying to make a color block-style page with divs with colored backgrounds. 因此,我正在尝试使用具有彩色背景的div制作一个颜色块样式的页面。 Only the divs do not show up, nor does their background color.
仅div不显示,背景色也不显示。
Ideally it will be 4 rows of boxes (200px in height) with: 理想情况下,它将是4行框(高度为200px),其中:
.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" -->
Check this simplified example... JSFiddle Example 检查这个简化的示例... JSFiddle示例
<div class="DivContainer">
divs were removed <div class="DivContainer">
div已删除 <div class="Between"></div>
spacer divs were removed <div class="Between"></div>
间隔div已删除 <div class="container">
includes all the divs, and makes it easier to simulate the 90% width on all the rows using padding. <div class="container">
的新包装器div包括所有div,并使使用填充在所有行上模拟90%宽度变得更加容易。 HTML 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 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;
}
Things that may give you minor issues in a floated structure are "Margin Collapse" which may cause an unexpected top or bottom margin size, and the "Box Model" which may cause the rows that contain the floated divs to equal more than 100% of the screen width, and cause the floated divs to bump down to the next row. 在浮动结构中可能会给您带来一些小问题的是“保证金崩溃”(可能会导致意外的顶部或底部保证金大小),以及“框模型”(Box Model),这可能会导致包含浮动div的行大于等于100%屏幕宽度,并使浮动的div向下碰撞到下一行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.