如何在Axis上定位元素（以完美契合）？

Question

給定一行元素（數據點集），每個元素都有一定的大小和值（在X軸上），它們如何以這樣的方式定位在同一個軸上，沒有一個元素會溢出？

（圓圈所在的區域在寬度方面是流動的）

現在：

通緝：

演示頁面

（首選僅限CSS的解決方案）

Answer 1

如果您希望縮放整個圓分布以適合可用空間（保持X軸值的比率）。 嘗試這個：

body { 
    width:200px; /* Can be any witdth in % vw px etc */
    position:relative;
}

Answer 2

我用這個公式修正了我的演示 ：

// 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位置）移動到left ，因此元素越靠右，它就越重新調整到左邊，所以最右邊的元素會重新調整完全本身，意味着它的寬度將被轉換為左邊，而最左邊的元素根本不會重新調整。