0

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

这是我现在代码的紧凑版本:http: //jsfiddle.net/4ZGmj/183/

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

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

提前致谢

4

2 回答 2

2

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

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

就像,如果一个 div 是“.animated”,它有 33% 的宽度,而其他的将有大约 22% ......不过,您可能可以为它安排一个更好的数学!

编辑:错字

于 2012-08-06T21:14:10.897 回答
0

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

感谢您的帮助,如果不是您的输入,我不会修复它。

于 2012-08-07T09:22:47.753 回答