JS数字计数器适配单位显示：flex纵向容器内元素横向排列问题

有两种方案可以满足你的需求，既保留外层容器的垂直布局，又让数字和K横向排列：

方案一：用子容器包裹数字与单位（推荐） #

把数字和K放在单独的子容器里，让这个子容器采用横向flex布局，外层容器保持column不变，既能实现数字和K的并排显示，又不影响下方文本的垂直排版。

修改后的代码 #

HTML

<div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <!-- 新增子容器包裹数字和K -->
    <div class="value-wrapper">
      <span class="num-itemcounter" data-val="60">00</span>
      <span class="metric-itemcounter">K</span>
    </div>
    <span class="text-itemcounter">Happy Partners</span>
  </div>
</div>

CSS

/* 新增子容器样式 */
.value-wrapper {
  display: flex;
  align-items: baseline; /* 让K和数字底部对齐，视觉更协调 */
  gap: 0.2em; /* 数字与K之间的间距，可按需调整 */
}

/* 保留原有CSS */
.wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
}

JS

无需修改，保留你原有的代码即可。

方案二：直接在JS中拼接单位（更简洁） #

如果你不想额外添加HTML标签，可以直接在JS中处理原始数值（比如60000），除以1000后拼接K，省去单独的K标签。

修改后的代码 #

HTML

<div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <span class="num-itemcounter" data-val="60000">00</span>
    <span class="text-itemcounter">Happy Partners</span>
  </div>
</div>

JS

let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  // 读取原始数值并转换为以K为单位的整数
  let endValue = parseInt(valueDisplay.getAttribute("data-val")) / 1000;
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    // 直接拼接K到数字后面
    valueDisplay.textContent = startValue + 'K';
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});

CSS

保留原有样式即可，不需要额外修改。

为什么你之前的尝试没用？ #

• 给span加display: inline-block：因为外层.container-itemcounter是flex容器且flex-direction: column，flex子元素会忽略inline-block属性，强制垂直排列，所以无效。
• 修改.container-itemcounter的flex-direction: row：这会让容器内所有元素（包括下方的文本）都横向排列，破坏了你原本想要的垂直布局结构。

内容的提问来源于stack exchange，提问作者Marcosgarmar