javascript - 计算具有相同类别的每个元素的 margin

Question

我想沿着不同的 X 轴放置具有不同宽度的不同 DIV，(50%、30% …)所以我尝试了这个解决方案:

$(document).ready(function() {
$('.axis').each(function() {
var $this = $(this);
$this.css('margin-left', -(startWidth / 2) + 'px');
});
});

CSS:

#item_1 {
position: absolute;
top: 100px;
left: 50%;
width: 500px;
height: 100px;
}

不知何故，它还没有工作......

<div class="axis" id="item_1"></div>
<div class="axis" id="item_2"></div>
<div class="axis" id="item_3"></div>

这是一个显示问题的 JFiddle，我想让 ITEMS 以 X 轴为中心......

https://jsfiddle.net/gtpadmy2/

Answer 1

不需要JS。只需在您的 CSS 中添加修复半页边距的翻译:

.axis {
  // other properties
  left: 50%;
  transform: translateX(-50%);
}

Updated fiddle.