动画浮动的div

我正在尝试使用专门用于动画和布局的CSS的水平手风琴的效果。因此，我设置了4列，与经典手风琴的主要区别在于，当我点击某一列时，不是沿一个方向展开，而是沿两个方向展开，并将其他列左右推。动画浮动的div

这里是我的代码的压缩版本现在：http://jsfiddle.net/4ZGmj/183/

如果您单击红色柱，它的工作原理完全像预期一样：列在两个方向展开，所有其他列都推到右边。现在，如果您单击绿色列，您会发现一些不同之处：该列按照预期的方向在两个方向上展开，但只会将列向右推，而将列重叠到左侧。我想为每列在展开时推送所有相邻的列。

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

在此先感谢

来源

2012-08-06 DrunkenBeard

不太清楚如何解决它，但我认为你在正确的轨道与浮法：左。如果您将其更改为float：right，则行为会发生显着变化。 – jgibson 2012-08-06 21:11:07

@Stano，你是对的，消极的边缘似乎是原因。只有当我删除它时，div才会在两个方向上扩展，这是主要的预期效果。此外，我实际上使用Firefox，但代码旨在在iPad上运行，因此我必须为Safari编码，这就是为什么我使用-webkit- – DrunkenBeard 2012-08-06 21:25:24

@DrunkenBeard好吧，我只推荐Firefox，因为它有很棒的Web开发工具。试图做一些[修改]（http://jsfiddle.net/4ZGmj/184/），它并不完美，也不像看起来那么容易。 – Stano 2012-08-06 21:41:19

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

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

来源

2012-08-07 09:22:47 DrunkenBeard

我觉得你的问题可能是在.animate类，你给它一个负 50像素的保证金。负边距与“前一个”元素重叠（在所有方向上）。如果你删除了-50px，图像将只会“流”到右侧，因为它们通过float：left属性“粘贴”，这将不会做你想要的任何东西:(

我想方式为了解决这个问题，需要使用相对的尺寸，尝试设置一个固定宽度的div，并使用相对的尺寸（如每个25％），你可能必须设置一个行为：没有点击的div也是。

就像，如果一个DIV是“.animated”，它有33％的宽度，而其他人则有22％左右...... 有可能是一个更好的数学可以安排的，虽然

编辑：错字

来源

2012-08-06 21:14:10 Tobias

感谢您的输入。消极的利润率似乎确实是这个原因。我会研究你的解决方案。 – DrunkenBeard 2012-08-06 21:28:23

动画浮动的div

回答

相关问题