Absolute Mitte dynamische Anzahl der divs

Question

Ich habe ein Backoffice, wo ich Karten zu einem Spread hinzufügen und positionieren sie jedoch mag ich mit top und left. Dann muss ich diese Spreads auf meiner Website präsentieren.

Mein Problem ist, dass ich die Karten in den Spreads immer horizontal und vertikal zentrieren möchte. Das Hauptproblem besteht darin, dass die Anzahl der Karten in jedem Spread variabel ist und jede Karte top und left unterschiedlich ist, abhängig von den Wünschen des Benutzers.

Ich speichere die top und left von jeder Karte in der Datenbank, und dann präsentiere ich sie auf der Website.

Hier ist die Geige zu überprüfen: https://jsfiddle.net/wajrga88/10/

Jede Hilfe? Ist das, was ich möchte, sogar möglich?

EDIT .: Ich habe die Geige mit einem realitätsnäheren Szenario aktualisiert.

Answer 1

Es ist nur wirklich möglich mit Javascript, da Sie die Bounding Box dafür berechnen müssen. Try this:

//define dimensions of a deck - this is necessary for centering since the registration point is on the top-left corner of the deck 
 
var deck_width = 54.6 
 
var deck_height = 98.6 
 

 
function setCardsPosition(target,positions){ 
 
\t // calculate bounding box 
 
\t var minX = 9999 
 
    var minY = 9999 
 
    var maxX = -9999 
 
    var maxY = -9999 
 
    for(i=0;i<positions.length;i++){ 
 
    //this will find the most left (minX) most right (maxX) most up (minY) and most down (maxY) position of all the cards. 
 
    \t minX = Math.min(minX,positions[i][0]) 
 
    minY = Math.min(minY,positions[i][1]) 
 
    maxX = Math.max(maxX,positions[i][0]) 
 
    maxY = Math.max(maxY,positions[i][1]) 
 
    } 
 
    //calculate width&height of min-max coordinates - the bounding box (x=minX,y=minY,w=bounds_width,h=bounds_height) 
 
    var bounds_width = maxX-minX 
 
    var bounds_height = maxY-minY 
 
    
 
    //get width&height of the container 
 
    var target_width = target.clientWidth 
 
    var target_height = target.clientHeight 
 

 
    //get all 3 cards in container...you could create them dynamically aswell at this point 
 
    var cards = target.getElementsByClassName('transparent_deck') 
 
    for(i=0;i<positions.length;i++){ 
 
    \t //calculate cards position using the bounding box and the defined deck dimensions 
 
    // target_width/2 -> center point of container 
 
    // + positions[i][0] -> add raw position of current card 
 
    // - minX -> move card so the most left card lies on the center of the container 
 
    // - bounds_width/2 -> move card half the width of the bounding box of all cards 
 
    // - deck_width/2 -> correct the cards position (due to the registration point is top-left for css absolute positions) 
 
    \t var cardX = target_width/2 + positions[i][0] - minX - bounds_width/2 - deck_width/2 
 
    var cardY = target_height/2 + positions[i][1] - minY - bounds_height/2 - deck_height/2 
 
    //set position to style 
 
    cards[i].style.left = cardX + 'px' 
 
    cards[i].style.top = cardY + 'px' 
 
    } 
 
} 
 

 
var positions1 = [[80,100],[150,140],[220,100]] // the positions of each card 
 
setCardsPosition(document.getElementById('spread1'),positions1)

body{ 
 
    background-color: #666666; 
 
} 
 
.transparent_deck{ 
 
\t position: absolute; 
 
\t width: 54.6px; 
 
\t height: 98.6px; 
 
\t border-radius: 5px; 
 
    background: rgba(255,255,255,0.5); 
 
\t border: solid 2px #ffffff; 
 
} 
 

 
.spread{ 
 
    height: 275px; 
 
    position: relative; 
 
    border: 2px solid #000; 
 
}

<div class="row"> 
 
    <div class="col-xs-6 spread" id="spread1"> 
 
    <div class="transparent_deck" style="top: 100px; left: 80px;"></div> 
 
    <div class="transparent_deck" style="top: 140px; left: 150px;"></div> 
 
    <div class="transparent_deck" style="top: 100px; left: 220px;"></div> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <p class="spread_title">Title</p> 
 
     <p class="spread_description">Description</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Sie die Positionen einstellen setCardsPosition(CONTAINER_ELEMENT,POSITONS_ARRAY) über Aufruf