Question

我有一个后台，我可以将卡添加到点差并定位它们，但我喜欢使用top和left。然后我必须在我的网站上展示这些点差。

我的问题是，我希望始终水平和垂直居中展开牌。主要问题是每个点差中的卡片数量是可变的，每张卡片top和left根据用户的意愿而有所不同。

我正在保存数据库中每张卡的top和left，然后我将它们显示在网站上。

以下是检查的小提琴：https://jsfiddle.net/wajrga88/10/

有任何帮助吗？我甚至可能会问这个问题吗？

编辑：我已经用更贴近现实的情景更新了小提琴。

Answer 1

只有使用javascript才能真正实现，因为你需要为此计算边界框。试试这个：

＆＃13;

//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){
	// calculate bounding box
	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.
  	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++){
  	//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)
  	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)

＆＃13;

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

＆＃13;

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

＆＃13;

您可以通过致电setCardsPosition(CONTAINER_ELEMENT,POSITONS_ARRAY)

来设置排名

绝对中心动态div数

1 个答案: