3
Ich versuche herauszufinden, wie bestimmte divs in der Mitte des Bildschirms zu einer Perlenkette Art der Form zu positionieren. Die Form sollte wie folgt aussehen:Position Divs auf dem Bildschirm in einer bestimmten Form
0 0
0 0
0 0
0 0
0
0
Ich möchte dies auf einem beweglichen ionischen App mit Jquery tun. Mein Ziel ist es, diese "Perlen" auf dem Bildschirm zentrieren zu lassen. Hier ist die HTML ich für meine Ansicht bin mit dem ich bin glücklich, wenn nötig zu ändern sein:
<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>
Mein aktueller 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;
}
Es sieht gut aus auf dem iPhone Blick aber auf dem ipad es sieht durcheinander ... Kann ich dies mit Javascript tun, um sicherzustellen, dass die Perlen immer in der Mitte ausgerichtet sind?
Vielen Dank für Ihre Eingabe!
JS Fiddle: https://jsfiddle.net/tetxwj8k/
Es wäre fantastisch, wenn Sie einen jsfiddle Link hinzufügen könnte, die dies zeigt. – TheNavigat
Ich habe den Link hinzugefügt. Danke für die Eingabe! –
Ich habe versucht, die Auflösung und das Testen mithilfe der Chrome-Gerätesymbolleiste zu ändern. Wenn das möglich wäre, können Sie bitte Screenshots hinzufügen, wie es auf einem iPad aussieht? Sieht es "durcheinander"? Wenn das so ist, wie? oder ist es einfach nicht im Zentrum? – TheNavigat