絕對中心動態數divs

Question

我有一個backoffice，我可以將卡添加到傳播並定位它們，但是我喜歡使用top和left。然後我必須在我的網站上展示這些點差。

我的問題是，我想總是水平和垂直卡中的點差。主要問題是每個傳播中的卡片數量是可變的，並且每個卡片top和left根據用戶的意願而不同。

我將每張卡片的top和left保存在數據庫中，然後將它們呈現在網站中。

這裏是檢查出的小提琴：https://jsfiddle.net/wajrga88/10/

任何幫助嗎？我甚至可能問什麼？

編輯：我更新了一個更接近現實場景的小提琴。

Answer 1

這只是真的可能與JavaScript，因爲你需要計算這個邊界框。通過調用setCardsPosition(CONTAINER_ELEMENT,POSITONS_ARRAY)

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

您可以設置位置