-2
我用多个div创建网格，每个div都有不同的颜色。但是，下面的代码显示所有div灰色。我怎样才能改变div的颜色？如何填充不同颜色的div？
#container{
width: 400px;
height: 300px;
}
.Rect{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
}
.Rect1{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 100px;
top: -300px;
}
.Rect2{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 200px;
top: -600px;
}
.Rect3{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 300px;
top: -900px;
}
#rectYellow{
width: 100px;
height: 75px;
background: yellow;
border-radius: 25px;
position: relative;
top: -1125px;
left: 100px;
}
#rectGreen{
width: 100px;
height: 75px;
background: green;
border-radius: 25px;
position: relative;
top: -1125px;
left: 200px;
}
#rectBlue{
width: 100px;
height: 75px;
background: blue;
border-radius: 25px;
position: relative;
top: -1200px;
left: 0px;
}
#rectWhite{
width: 100px;
height: 75px;
background: White;
border-radius: 25px;
position: relative;
top: -1425px;
left: 200px;
}
#rectOrange{
width: 100px;
height: 75px;
background: Orange;
border-radius: 25px;
position: relative;
top: -1275px;
left: 100px;
}<div id=container>
<!--1th row -->
<div class="Rect"></div>
<div class="Rect"></div>
<div id="rectBlue"></div><!--BLUE -->
<div class="Rect"></div>
<!--2th row -->
<div class="Rect1"></div>
<div id="rectYellow"></div><!--YELLOW -->
<div class="Rect1"></div>
<div id="rectOrange"></div><!--ORANGE -->
<!--3th row -->
<div id="rectWhite"></div><!--WHITE -->
<div class="Rect2"></div>
<div id="rectGreen"></div><!--GREEN -->
<div class="Rect2"></div>
<!--4th row -->
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
</div>我卡发生了什么事，道歉的代码块。我无法使用小提琴。
工作对我来说很好 - http://jsfiddle.net/0a8adkt0/和@Paulie_D存在相应小提琴，你会看看你是否编辑它，但我不知道我应该如何编辑： – Anonymous
那里应该有白色，黄色，蓝色，绿色和橙色的形状，它们分别命名为rectColor。一个空格，他们应该在那里 – wundersoy
他们消失的唯一原因是因为你没有给出适当的顶部和左侧绝对位置，这就是导致元素移出文档的原因。 – AmJustSam