Javascript 垂直对齐动画div

我有三个按钮，可以在单击时设置不同的输出文本，我正在尝试使用W3.CSS动画来“滑动”文本。我几乎让它使用两个单独的div工作，但无法让它们在按钮下正确对齐；每隔单击一次按钮，div显示的值低于上一次

到目前为止，我已经尝试了

float

，

垂直对齐：top

，

显示：inline block

，以及一些其他方法，但要么使用不当，要么其他方法（可能是冲突的父div样式）导致了问题

我修剪了不相关的代码，同时也留下了为这个特定部分显示div结构所必需的内容

• HTML:ID为

  old_output

  和

  new_output

  的div是我试图在按钮下方对齐的
• CSS:

  div.button\u output\u container

  和

  div.button\u output

  用于输出div及其容器
• JS：处理按钮点击，决定应该使用哪个动画，并设置输出文本（除了演示这个问题之外，我认为它基本上是不相关的）

---

我不确定我是否完全理解您的校准要求， 但是，如果您只想让div在相同的高度上渲染，可以选择

位置：absolute

，如下所示：

div.button_output_container {
  position: relative; 
}

div.button_output {
    margin: 16px 24px;
    width: 450px;
    position: absolute; 
}