修复<div>内文本位置：避免jQuery更新后文本偏移

嘿，我来帮你搞定这个文本偏移的问题！你的核心需求是让#mehlSumme2固定右对齐、#mehl固定左对齐，不管内容更新都不偏移——之前用inline布局的思路刚好踩了坑：流式的inline元素会跟着内容长度变化互相挤压，这就是你看到更新后移位的原因。

最优解决方案：用Flex布局实现稳定对齐 #

给父元素#mehlSumme（也就是那个td）设置flex布局，让两个子div分别贴紧左右两侧，不管内容怎么变，位置都不会乱。

调整后的CSS代码：

/* 给父TD设置flex布局，让子元素自动分配空间 */
#mehlSumme {
  display: flex;
  justify-content: space-between; /* 让两个子元素分别靠左右 */
  align-items: center; /* 垂直居中对齐，可选，让文本更整齐 */
  width: 100%; /* 确保TD占满可用宽度，避免太窄导致元素挤在一起 */
}

/* 调整两个子DIV的样式，不需要再用inline了 */
#mehlSumme2, #zuckerSumme2, #butterSumme2, #quarkSumme2, #fuellungButterSumme2, #fuellungZuckerSumme2, #eierSumme2, #bananenSumme2, #apfelSumme2 {
  font-size: 70%;
  padding-right: 5px; /* 按需保留右侧间距，不需要可以删掉 */
}

#mehl, #zucker, #butter, #quark, #fuellungButter, #fuellungZucker, #fuellungEier, #bananen, #apfel {
  font-size: 70%;
  padding-left: 5px; /* 按需保留左侧间距，不需要可以删掉 */
}

为什么这个方案能解决问题？

• display: flex把td变成弹性容器，子div会变成弹性项，脱离流式布局的限制
• justify-content: space-between会强制第一个子元素靠左、最后一个靠右，中间的空白自动填充，不管子元素内容长度怎么变，位置都固定不动
• 去掉display: inline后，两个div不会再互相挤压移位

测试jQuery更新效果 #

比如你用下面的代码更新内容，文本位置也不会偏移：

// 示例：更新#mehlSumme2的内容
$('#mehlSumme2').text('180g');

备选方案：绝对定位（兼容旧浏览器） #

如果需要兼容非常老的浏览器（比如IE9及以下），可以用绝对定位方案：

#mehlSumme {
  position: relative; /* 父元素设为相对定位，作为子元素定位的参考 */
  width: 100%;
  min-height: 20px; /* 确保TD有足够高度，避免两个div重叠 */
  padding: 0 10px; /* 给左右留空间，避免文本贴边 */
}

#mehlSumme2 {
  position: absolute;
  right: 10px; /* 固定在TD右侧 */
  font-size: 70%;
}

#mehl {
  position: absolute;
  left: 10px; /* 固定在TD左侧 */
  font-size: 70%;
}

不过这种方式需要手动控制TD的高度，flex布局是更现代、更省心的选择。

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