如何填补不同颜色的div？

时间：2016-01-12 19:55:36

标签： html css visible

我正在使用多个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>

我对发生的事情感到困惑，对代码块道歉。我不能用小提琴。

3 个答案:

答案 0 :(得分：0)

您的top计算已关闭。我已经更新了它们（仅为演示将白色切换为粉红色），以便它们在代码片段中排成一行。

话虽如此，我不确定最终结果应该是什么。使用position:absolute;并为容器定义特定维度可能比计算每个元素的relative位置更容易。或者制作每个元素display: inline-block;并让它们自然包裹。

＆＃13;
＆＃13; 
#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: -300px;
  left: 100px;
}

#rectGreen{
  width: 100px;
  height: 75px;
  background: green;
  border-radius: 25px;
  position: relative;
  top: -600px;
  left: 200px;
}

#rectBlue{
  width: 100px;
  height: 75px;
  background: blue;
  border-radius: 25px;
  position: relative;
  top: 0px;
  left: 0px;
}

#rectWhite{
  width: 100px;
  height: 75px;
  background: pink;
  border-radius: 25px;
  position: relative;
  top: -600px;
  left: 200px;
}

#rectOrange{
  width: 100px;
  height: 75px;
  background: Orange;
  border-radius: 25px;
  position: relative;
  top: -300px;
  left: 100px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您的代码中的top位置无效。它应该是这样的：

＆＃13;
＆＃13; 
#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: -300px;
  left: 100px;
}

#rectGreen{
  width: 100px;
  height: 75px;
  background: green;
  border-radius: 25px;
  position: relative;
  top: -600px;
  left: 200px;
}

#rectBlue{
  width: 100px;
  height: 75px;
  background: blue;
  border-radius: 25px;
  position: relative;
  top: 0px;
  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: -300px;
  left: 100px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

它消失的唯一原因是因为你没有提供适当的top和left absolute position，这就是导致元素移出文档的原因。但现在它已经修好了...... 

#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: -150px;
  left: 100px;
}

#rectGreen{
  width: 100px;
  height: 75px;
  background: green;
  border-radius: 25px;
  position: relative;
  top: -600px;
  left: 200px;
}

#rectBlue{
  width: 100px;
  height: 75px;
  background: blue;
  border-radius: 25px;
  position: relative;
  top: -150px;
  left: 200px;
}

#rectWhite{
  width: 100px;
  height: 75px;
  background: #ECECEC;
  border-radius: 25px;
  position: relative;
  top: -526px;
  left: 100px;
}

#rectOrange{
  width: 100px;
  height: 75px;
  background: Orange;
  border-radius: 25px;
  position: relative;
  top: -375px;
  left: 0px;
}
<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>

相关问题
最新问题