带有内联 block 元素的 JQuery 动画行为

Question

我正在使用 JQuery 为两个 div 制作动画，一个在另一个之上，在另一个 div 中。效果就像一个按钮，上下两半打开和向下打开以显示一些内容。这个想法是使用 float:left

将许多这样的“按钮”排成一行

单击按钮时，脚本会检查另一个按钮是否打开，如果打开，则关闭该按钮并打开单击的按钮。

这工作正常，除了我想在容器 div 类上将 float:left 更改为 display:inline-block(以防止包装多个按钮，如果浏览器已调整大小)。问题是按钮的布局中断，因为 JQuery 动画似乎在动画时改变了按钮容器的垂直位置。

参见 fiddle

Answer 1

.btn{
  display:inline-block;
  vertical-align:top;
  margin-left: 20px;
}

参见 fiddle