Question

所以，我有来自codepen.io的以下代码片段，我正在尝试创建一个Simon游戏。我已经创建了游戏形状的基本轮廓，但我试图在我在整个人物中心创建的圆形div内部重新定位div。但是，由于某种原因，无论我做什么，div都拒绝移动。谁能告诉我为什么会这样？

http://codepen.io/redixhumayun/pen/JKryAZ?editors=1100

这是我想要移动的div的特定代码段。

$Message

Answer 1

试试这个：

.game{
  height:500px;
  width:600px;
  background-color:violet;
  margin:0px auto;
  transform: translateY(5%);
  border-radius:0px; !important
}
div{
  width:200px;
  height:200px;
  background-color:#ccc;
  border-radius:100px;
}
#center{
  border: solid #fff 1px;
  margin: 0px auto 0px auto;
  -webkit-transform: translateY(75%);
  position:relative;
}
#tl, #tr, #bl, #br{
  height:200px;
  width:200px;
  position:absolute;
  z-index:-1;
}
#tl{
  border-radius:200px 0 0 0;
  background-color:yellow;
  margin:-152.5px auto 0px 95px;
}
#tr{
  border-radius:0 200px 0 0;
  background-color:blue;
  margin:-152.5px auto 0px 305px; 
}
#bl{
  border-radius:0 0 0 200px;
  background-color:green;
  margin:52.5px auto 0px 95px;
}
#br{
  border-radius:0 0 200px 0;
  background-color:red;
  margin:52.5px auto 0px 305px;
}
.count{
  height:50px;
  width:75px;
  background-color:orange;
  border-radius:25%; !important
  margin:100px auto 0px 20px;
      margin:75px auto;

}

DEMO HERE

Answer 2

在.count

中添加以下css

.count{
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

Demo

如何在圆形div内移动div？

2 个答案: