如何在内容动态变化时让两个div的内容按小数点对齐？

要解决数据变化时小数点错位的问题，核心是让小数点的位置固定，不受整数/小数部分长度变化的影响。以下是几个可靠的CSS主导方案，无需硬编码或不稳定的JS填充：

方案一：CSS Grid 拆分布局（推荐） #

将每个数值拆分为整数部分、小数点、小数部分三个独立元素，通过Grid布局让对应部分强制对齐，彻底解决错位问题。

修改后的HTML结构 #

<div class="weatherwrap">
  <div class="tempwrap" title="Current Temperature">
    <span class="num-int" id="temp-int"></span>
    <span class="num-dot">.</span>
    <span class="num-dec" id="temp-dec"></span>
  </div>
  <div class="humidwrap" title="Current Humidity">
    <span class="num-int" id="humid-int"></span>
    <span class="num-dot">.</span>
    <span class="num-dec" id="humid-dec"></span>
  </div>
</div>

CSS 样式 #

.weatherwrap {
  display: grid;
  /* 三列布局：整数列自适应、小数点固定宽度、小数列自适应 */
  grid-template-columns: auto min-content auto;
  gap: 2px; /* 可根据视觉需求调整间距 */
}

/* 让子元素直接参与Grid布局，忽略父div的包裹 */
.tempwrap, .humidwrap {
  display: contents;
}

.num-int {
  text-align: right; /* 整数部分右对齐，确保小数点位置固定 */
}

.num-dot {
  width: 1ch; /* 利用等宽单位ch固定小数点宽度 */
  display: inline-block;
  text-align: center;
}

.num-dec {
  text-align: left; /* 小数部分左对齐 */
}

JavaScript 数据注入 #

只需将数值拆分为整数和小数部分，分别插入对应元素：

// 更新温度示例
function updateTemperature(temp) {
  const [intPart, decPart] = temp.toString().split('.');
  document.getElementById('temp-int').textContent = intPart;
  // 处理无小数的情况，默认补0
  document.getElementById('temp-dec').textContent = decPart ?? '0';
}

// 更新湿度示例
function updateHumidity(humidity) {
  const [intPart, decPart] = humidity.toString().split('.');
  document.getElementById('humid-int').textContent = intPart;
  document.getElementById('humid-dec').textContent = decPart ?? '0';
}

方案二：表格布局（简单直接） #

利用表格单元格自动对齐的特性，实现和Grid方案同样的效果，适合习惯表格布局的场景。

CSS 样式 #

.weatherwrap {
  display: table;
  border-collapse: separate;
  border-spacing: 4px 0; /* 调整列间距 */
}

.tempwrap, .humidwrap {
  display: table-row;
}

.num-int, .num-dot, .num-dec {
  display: table-cell;
}

.num-int {
  text-align: right;
}

.num-dot {
  text-align: center;
  width: 1ch;
}

.num-dec {
  text-align: left;
}

HTML和JS部分与方案一完全一致。

方案三：等宽字体+右对齐（无需修改HTML） #

如果不想调整HTML结构，可使用等宽字体配合右对齐实现近似对齐，但需预估整数部分的最大长度：

CSS 样式 #

.weatherwrap {
  width: 8ch; /* 预留足够宽度，比如整数最多3位+小数点+小数2位=6ch，预留2ch余量 */
}

.tempwrap, .humidwrap {
  font-family: monospace; /* 必须使用等宽字体 */
  text-align: right; /* 数值整体右对齐，确保小数点位置统一 */
}

该方案的局限性是依赖等宽字体，且需要提前预判数值的最大长度，适合数值范围明确的场景。

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