如何在轴上放置元素（以完美配合）？

vsync 发表于 Dev

垂直同步

给定一排元素（一组数据点），每个元素都具有一定的大小和值（在X轴上），如何将它们定位在同一轴上，而不会溢出？

（圆圈所在的区域在宽度上是可变的）

现在：

通缉：

演示页面

（纯CSS解决方案将是首选）

垂直同步

我已使用以下公式修复了演示：

// A set of circles
var items = [
  { size:30, value:0 },
  { size:22, value:3 },
  { size:55, value:20 }, 
  { size:70, value:66 },
  { size:33, value:96 },
  { size:36, value:100 }
];


items.forEach(function(item, i){
  // create a "circle" element
  var elm = document.createElement('div');
  elm.className = 'circle';

  // set position & size
  elm.style.cssText = `padding   : ${item.size}px; 
                       left      : ${item.value}%; 
                       transform : translateX(-${item.value}%)`

  // add circle to document
  document.querySelector('section').appendChild(elm);
});

使用translate将元素相对于其值（即left位置，即元素的位置）向左移动，因此，元素向右越多，向左重新调整的次数就越多，因此，最右边的元素将完全对其自身进行重新调整，这意味着它的所有宽度都将向左平移，而最左边的元素将完全不会重新调整其自身。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。