您的div .long的宽度是其父代的80%，这不是一个固定的宽度，有三种可能的解决方案：

• 给予它一个固定的宽度（例如400px）
• 如果数字太长，请使用word-break css属性将其拆分
• 请确保有足够的空间来容纳该号码。

此外，display属性有点棘手，可能会产生意想不到的效果。也许您可以通过为子div使用不同的显示值来改变某些内容，从而获得更好的结果。

所以为了确保小数点不会随着文本的移动而移动，你必须把div拆分成两个子元素，确保第二个子元素有足够的宽度来处理2个字符，有一个非常方便的css单元ch可以做到这一点。

window.onload = () => {
  setInterval(() => {
    const numString = (Math.random() * 3000).toFixed(2);
    document.querySelector('.long').textContent = numString.split('.')[0] + ".";
    document.querySelector('.short').textContent = numString.split('.')[1];
  }, 500);
}

.parent {
  width: 400px;
  height: 200px;
  display: flex;
}

.long {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-right: 1px solid red;
  background-color: goldenrod;
}

.short {
  width: 2ch;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: lightskyblue;
}

<div class="parent">
  <div class="long"></div>
  <div class="short"></div>
</div>