动画浮动 div答案

【问题标题】：Animating a floated div动画浮动 div
【发布时间】：2012-08-07 17:22:47
【问题描述】：

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

这是我现在的代码的精简版：http://jsfiddle.net/4ZGmj/183/

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

我想这可能与我的列向左浮动有关。你们对导致这种行为的原因以及我能做些什么来解决它有任何见解吗？

提前致谢

【问题讨论】：

不太确定如何修复它，但我认为你在浮动的正确轨道上：左。如果将其更改为 float: 对，则行为会发生显着变化。
@Stano，你是对的，负边距似乎是原因。只有当我删除它时，div 才会在两个方向上展开，这是主要的预期效果。我实际上也在使用 Firefox，但代码是为了在 iPad 上运行，所以我必须为 Safari 编写代码，这就是我使用 -webkit- 的原因
@DrunkenBeard 好吧，我只推荐 Firefox，因为它有很棒的 Web 开发工具。试着做了一些modification，它并不完美，也没有看起来那么容易。

【解决方案1】：

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

我认为解决这个问题的方法是使用相对尺寸。尝试设置一个固定宽度的 div 并使用相对尺寸（例如每个 25%）。您可能还必须在 :not clicked div 上设置行为。

例如，如果一个 div 是“.animated”，它的宽度为 33%，而其他的大约为 22%... 不过，您可能可以安排更好的数学运算！

编辑：错字

【讨论】：

【解决方案2】：

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

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

【讨论】：