我正在尝试使用专门用于动画和布局的 CSS 来实现水平手风琴的效果。所以我设置了 4 个列,与经典手风琴的主要区别在于,当我单击一个列时,它应该在两个方向上展开,而不是在一个方向上展开,然后左右推动其他列。
这是我现在代码的紧凑版本:http: //jsfiddle.net/4ZGmj/183/
如果单击红色列,它会完全按预期工作:该列在两个方向上展开,所有其他列都被推到右侧。现在,如果您单击绿色列,您会注意到一些不同的情况:该列按预期在两个方向上扩展,但它只会将列推到右侧,同时将列重叠到左侧。我想要的是每列在展开时推动所有相邻的列。
我想这可能与我的列向左浮动有关。你们对导致这种行为的原因以及我能做些什么来解决它有任何见解吗?
提前致谢