アニメーションとレイアウトにCSSのみを使用して、水平アコーディオンの効果を実現しようとしています。したがって、4つの列を設定しました。従来のアコーディオンとの主な違いは、列をクリックすると、一方向に拡大するのではなく、両方向に拡大し、他の列を左右に押す必要があることです。
これが私のコードのコンパクトバージョンです：http：//jsfiddle.net/4ZGmj/183/
赤い列をクリックすると、意図したとおりに機能します。列は両方向に展開され、他のすべての列は右にプッシュされます。ここで、緑色の列をクリックすると、別のことに気付くでしょう。列は意図したとおりに両方向に拡張されますが、列を左に重ねながら、列を右に押すだけです。私が欲しいのは、各列が展開されたときにすべての隣接する列をプッシュすることです。
私のコラムが左に浮いているという事実と関係があるのではないかと思います。この動作の原因と、それを修正するために私ができることについて、何か洞察がありますか？
前もって感謝します
あなたの問題は、負の50px マージンを与える .animate クラスにあると思います。負のマージンは、「前の」要素に (すべての方向で) 重なっています。-50px を削除すると、float:left プロパティを介して「接着」されるため、画像は右に「流れる」だけになります。
これを回避する方法は、相対寸法を使用することだと思います。固定幅の div を設定し、相対サイズ (それぞれ 25% など) を使用してみてください。おそらく、:not clicked div にも動作を設定する必要があります。
たとえば、1 つの div が「.animated」の場合、幅は 33% ですが、他の部分の幅は約 22% になります。ただし、これを調整できるより良い計算がおそらくあります。
編集：タイプミス
「アニメーション」クラスから負のマージン値を削除することで、それを修正して意図した効果を得ることができました (これは両方の方法で拡大する責任がありましたが、左へのオーバーラップも引き起こしました)。代わりに、この負のマージン値を持ち、常に最初の列に適用する新しいクラス「pushleft」を追加しました。ここで効果を確認し、アイデアをよりよく理解することができます: http://jsfiddle.net/4ZGmj/185/
助けてくれてありがとう、あなたの意見がなければ、私はそれを修正しなかったでしょう.