动画浮动的div

Question

我正在尝试使用CSS专门用于动画和布局来实现水平手风琴的效果。所以我设置了4个列，与经典手风琴的主要区别在于，当我单击一个列时，不是向一个方向扩展，而是应该向两个方向扩展并向左和向右推动其他列。

以下是我的代码的紧凑版本：http://jsfiddle.net/4ZGmj/183/

如果单击红色列，它将完全按预期工作：列向两个方向展开，所有其他列向右推。现在，如果单击绿色列，您会发现一些不同的内容：列按预期在两个方向上展开，但它只向右推列，同时将列重叠到左侧。我想要的是每个列在扩展时推送所有相邻列。

我想这可能与我的列向左浮动的事实有关。你们对导致这种行为的原因有什么了解吗？我能做些什么来解决这个问题？

提前致谢

Answer 1

我认为你的问题可能出现在.animate类中，你给它一个负 50px的边距。负边距与“前一个”元素（在所有方向上）重叠。如果删除-50px，图像将只“向右”流动，因为它们通过float：left属性“粘合”，无论如何都不能达到你想要的效果:(

我认为解决这个问题的方法是使用相对尺寸。尝试设置具有固定宽度的div并使用相对尺寸（例如每个25％）。您可能必须在：未点击的div上设置行为。

就像，如果一个div是“.animated”，它有33％的宽度，而其他的则有22％...... 不过，你可以安排一个更好的数学计算！

编辑：拼写错误

Answer 2

我能够通过从“animate”类中删除负边距值来修复它并获得预期效果（这有助于两种方式扩展，但也导致左侧重叠）。相反，我添加了一个新的类“pushleft”，它具有这个负边距值，并且我总是应用于第一列。你可以在这里看到效果并更好地理解这个想法：http://jsfiddle.net/4ZGmj/185/

感谢您的帮助，如果不是您的意见，我就不会修复它。