我正在尝试使用专门用于动画和布局的 CSS 来实现水平 Accordion 的效果。所以我设置了 4 列，与经典 Accordion 的主要区别在于，当我单击一列时，它不会向一个方向扩展，而是应该向两个方向扩展，并向左和向右插入其他列。
现在这是我的代码的精简版:http://jsfiddle.net/4ZGmj/183/
如果您单击红色列，它会完全按预期工作:该列在两个方向上展开，所有其他列都被推到右侧。现在，如果您单击绿色列，您会注意到一些不同之处:该列按预期向两个方向扩展，但它仅将列推向右侧，同时将列与左侧重叠。我想要的是每列在展开时插入所有相邻的列。
我想这可能与我的列向左浮动有关。你们对导致此行为的原因以及我可以采取什么措施来解决它有任何见解吗？
提前致谢
最佳答案
我认为您的问题可能出在 .animate 类中，您在其中给它一个 negative 50px 边距。负边距与“前一个”元素重叠(在所有方向上)。如果你删除 -50px，图像只会“流动”到右边，因为它们是通过 float:left 属性“粘合”的，无论如何它都不会做你想要的:(
我认为解决这个问题的方法是使用相对尺寸。尝试设置一个具有固定宽度的 div 并使用相对尺寸(例如每个尺寸为 25%)。您可能还必须在 :not clicked div 上设置一个行为。
比如，如果一个 div 是“.animated”，它有 33% 的宽度，而其他的将有大约 22%... 不过，您可能可以安排更好的数学运算!
编辑:打字错误
关于css - 为 float 的 div 设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11835765/