動畫浮動的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

回答

相關問題