-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