绝对中心动态数divs
我有一个backoffice,我可以将卡添加到传播并定位它们,但是我喜欢使用top
和left
。然后我必须在我的网站上展示这些点差。绝对中心动态数divs
我的问题是,我想总是水平和垂直卡中的点差。主要问题是每个传播中的卡片数量是可变的,并且每个卡片top
和left
根据用户的意愿而不同。
我将每张卡片的top
和left
保存在数据库中,然后将它们呈现在网站中。
这里是检查出的小提琴:https://jsfiddle.net/wajrga88/10/
任何帮助吗?我甚至可能问什么?
编辑:我更新了一个更接近现实场景的小提琴。
这只是真的可能与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>
您可以设置位置
嘿。我将该代码应用于当前情况,但恐怕它不起作用100%:/以下是我当前的场景:https://jsfiddle.net/ddgtmj43/1/ –
这是因为您甚至使用jquery尽管它不包括在内。此外,这些头寸也有点混乱。 https://jsfiddle.net/md47ncnm/ –
我的错误,解决方案是。我忘记考虑到在我的办公室里,卡片的大小几乎是我在网站上的三倍,所以我不得不将每个顶部分开,然后左移3,以使其成比例。它现在工作100%。谢谢:D(如果可能的话,你能在代码中的评论中更详细地描述一下吗?我真的很想了解它的每一部分,所以我可以增长一点:p) –
https://jsfiddle.net/kym60L9g/ – bhv
如果你正在使用的位置是绝对的,你必须使用: 试试这个左还是右。而不是px,你可以使用%,所以它可以在任何屏幕上自动调整 –
可能你可以使用flexbox来获得你的结果,正如@bhv所建议的那样,但为了进一步的帮助,我希望看到一个带有最终想要结果的jpg。另外,如果可以,请考虑减少标记。 – Stratboy