-2
Я создаю сетку с несколькими div и каждый div имеет разный цвет. Но следующий код отображает все div в одном сером цвете. Как изменить цвет div?Как заполнить divs разным цветом?
#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