Question

我试图找出如何在屏幕中间放置某些div来制作珍珠项链的形状。形状应如下所示：

我想在移动离子应用程序上使用jquery执行此操作。我的目标是拥有这些＆＃34;珠子＆＃34;以屏幕为中心。这是我用于我的观点的html，如果需要，我很乐意改变：

<ion-view view-title="Pray the Rosary" id="prayer">
  <ion-content>
    <div id="prayer-content">
    <div id="current">Sorrowful Mysteries</div>
    <div ng-click="play()" id="play">Begin</div>
    <div ng-click="pause()" id="pause">Pause</div>
      <div class="bead" ng-class="inactive" id="bead14"></div>
      <div class="bead" id="bead13"></div>
      <div class="bead" id="bead12"></div>
      <div class="bead" id="bead11"></div>
      <div class="bead" id="bead10"></div>
      <div class="bead" id="bead9"></div>
      <div class="bead" id="bead8"></div>
      <div class="bead" id="bead7"></div>
      <div class="bead" id="bead6"></div>
      <div class="bead" id="bead5"></div>
      <div class="bead" id="bead4"></div>
      <div class="bead" id="bead3"></div>
      <div class="bead" id="bead2"></div>
      <div class="bead" id="bead1"></div>
      <div id="cross"><img src="../img/images/cross.png" alt=""></div>
    </div>
  </ion-content>
</ion-view>

我目前的CSS：

/*Prayer content*/
#prayer-content{
  width: 90%;
  padding: 10%;
  text-align: center;
  position:relative;
}
.bead{
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #8ee5f5;
}
.active{
  background: #006baf;
  border: 1px dashed #fff;
}
#cross{
  position: absolute;
  top: 320px;
  left: 154px;
}
#bead1{
  position: absolute;
  top: 292px;
  left: 196px;
}
#bead2{
  position: absolute;
  top: 266px;
  left: 196px;
}
#bead3{
  position: absolute;
  top: 240px;
  left: 196px;
}
#bead4{
  position: absolute;
  top: 201px;
  left: 191px;
  width: 30px;
  height: 30px;
}
#bead5{
  position: absolute;
  top: 180px;
  left: 223px;
}
#bead6{
  position: absolute;
  top: 155px;
  left: 236px;
}
#bead7{
  position: absolute;
  top: 126px;
  left: 248px;
}
#bead8{
  position: absolute;
  top: 95px;
  left: 240px;
}
#bead9{
  position: absolute;
  top: 76px;
  left: 215px;
}
#bead10{
  position: absolute;
  top: 76px;
  left: 180px;
}
#bead11{
  position: absolute;
  top: 95px;
  left: 155px;
}
#bead12{
  position: absolute;
  top: 126px;
  left: 151px;
}
#bead13{
  position: absolute;
  top: 153px;
  left: 160px;
}
#bead14{
  position: absolute;
  top: 180px;
  left: 173px;
}

在iphone视图上看起来不错，但在ipad上看起来很混乱......我可以用javascript做这个，以确保珠子始终保持在中心对齐吗？

感谢您的投入！

JS小提琴： https://jsfiddle.net/tetxwj8k/

Answer 1

/*Prayer content*/
#prayer-content{
  width: 128px;
  padding: 0;
  text-align: center;
  position:relative;
  margin: 0 auto;
  min-height: 489px;
  margin-top: -35px;
}
.bead{
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #8ee5f5;
}
.active{
  background: #006baf;
  border: 1px dashed #fff;
}
#cross{
  position: absolute;
  top: 320px;
  left: 154px;
}
.bead{
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #8ee5f5;
}
.active{
  background: #006baf;
  border: 1px dashed #fff;
}
#cross{
  position: absolute;
  top: 320px;
  left: 6px;
}
#bead1{
  position: absolute;
  top: 292px;
  left: 49px;
}
#bead2{
  position: absolute;
  top: 266px;
  left: 49px;
}
#bead3{
  position: absolute;
  top: 240px;
  left: 49px;
}
#bead4{
  position: absolute;
  top: 201px;
  left: 45px;
  width: 30px;
  height: 30px;
}
#bead5{
  position: absolute;
  top: 180px;
  left: 87px;
}
#bead6{
  position: absolute;
  top: 155px;
  left: 105px;
}
#bead7{
  position: absolute;
  top: 126px;
  left: 117px;
}
#bead8{
  position: absolute;
  top: 95px;
  left: 100px;
}
#bead9{
  position: absolute;
  top: 76px;
  left: 70px;
}
#bead10{
  position: absolute;
  top: 76px;
  left: 30px;
}
#bead11{
  position: absolute;
  top: 95px;
  left: 0px;
}
#bead12{
  position: absolute;
  top: 126px;
  left: -10px;
}
#bead13{
  position: absolute;
  top: 153px;
  left: 0px;
}
#bead14{
  position: absolute;
  top: 180px;
  left: 15px;
}

<ion-view view-title="Pray the Rosary" id="prayer">
  <ion-content>
    <div id="prayer-content">
    <div id="current">Sorrowful Mysteries</div>
    <div ng-click="play()" id="play">Begin</div>
    <div ng-click="pause()" id="pause">Pause</div>
      <div class="bead" ng-class="inactive" id="bead14"></div>
      <div class="bead" id="bead13"></div>
      <div class="bead" id="bead12"></div>
      <div class="bead" id="bead11"></div>
      <div class="bead" id="bead10"></div>
      <div class="bead" id="bead9"></div>
      <div class="bead" id="bead8"></div>
      <div class="bead" id="bead7"></div>
      <div class="bead" id="bead6"></div>
      <div class="bead" id="bead5"></div>
      <div class="bead" id="bead4"></div>
      <div class="bead" id="bead3"></div>
      <div class="bead" id="bead2"></div>
      <div class="bead" id="bead1"></div>
      <div id="cross"><img src="../img/images/cross.png" alt=""></div>
    </div>
  </ion-content>
</ion-view>

这是我保持中心的解决方案：

将屏幕上的div设置为特定形状

1 个答案: