屏幕上的位置div处于特定形状

我想弄清楚如何在屏幕中间放置某些div以制作珍珠项链类型的形状。形状应该是这样的：屏幕上的位置div处于特定形状

我想这样做与jquery上的移动离子应用程序。我的目标是让这些“珠子”集中在屏幕上。下面是我用我的观点，我很高兴地更改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/

来源

2016-11-20 Atlante Avila

这将是真棒，如果你可以添加的jsfiddle链接，显示这一点。 – TheNavigat

我添加了链接。感谢您的输入！ –

我试着改变分辨率和使用Chrome的设备工具栏进行测试，它仍然完美。如果可以的话，你可以添加屏幕截图，看它在iPad上的样子吗？它看起来“混乱”吗？如果是这样，怎么样？或者它只是不在中心？ – TheNavigat

/*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>

这里是我的解决方案，以保持它的中心：

来源

2016-11-21 14:10:50

屏幕上的位置div处于特定形状

回答

相关问题