垂直对齐动画 div

Question

我有三个按钮在单击时设置不同的输出文本，我正在尝试使用 W3.CSS 动画来“滑入”和滑出文本。我几乎让它使用两个单独的 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; 
}