垂直对齐的动画div

Question

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

到目前为止，我已经尝试过float，vertical-align: top，display: inline-block和其他一些东西，但是使用它们不正确或其他原因（可能是父div样式冲突）导致问题。

Image with a button's output displaying right under the buttons (as it should)

Image with the next button's output displaying lower than the first

我修剪了不相关的代码，同时还保留了显示此特定部分的div结构所必需的内容。

• HTML：ID为old_output和new_output的div是我要在按钮下方对齐的内容
• CSS：div.button_output_container和div.button_output用于输出div及其容器
• [JS：处理按钮的点击，决定应该使用哪个动画，并设置输出文本（除了演示我认为最不相关的问题之外]

JSFiddle link

Answer 1

我不确定我是否完全了解您的对齐要求，但是，如果您只想让div以相同的高度呈现，则可以选择position:absolute，如下所示：

div.button_output_container {
  position: relative; 
}

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