HTML中的DIV動態更改，但添加空白

Question

我一直在研究動態問題（技術術語），但是當然總有一些小問題需要克服。 我的問題是，當我在一個問題面板上選擇“顯示答案”時，分隔線會在行之間添加大量空白。 基本上，問題的數量是由屏幕的寬度來管理的，然后通過AJAX從index.php?questions&a={insertwidthofscreen*4}獲取問題，這是通過javascript完成的，並且可以自動運行。

我擁有的代碼如下，它被稱為“ math.php”作為臨時測試： http ://pastebin.com/MjGgSTYh一切都是通過上述文件生成的，沒有進行外部連接，數據庫的工作很容易並且我將使用舊系統來跟蹤已顯示的內容。

這個想法是，當單擊答案按鈕時，所有DIVS都會改變高度，高度取決於答案，答案可能從1個單詞到一個段落不等。

我對空白的意思的屏幕截圖。 http://imgur.com/KAOPHFI,wj0vWSg里面有兩張照片，我好一陣子沒看到下一個按鈕了。

干杯，萊昂

Answer 1

由於它不是完整的代碼（因此我很難測試自己），因此我將對此加以說明-您的qbox樣式（可能還有其他樣式？）具有固定的寬度-qbox為200px。 那應該是動態的嗎？ （您也列出了兩次寬度，但是值相同，所以在這種情況下沒關系）

如果您想發布更完整的代碼以供我自己粘貼到文件中，則可以更輕松地進行故障排除。

更新：

我知道現在發生了什么。 當您按特定的順序單擊答案時，會出現空白-即，如果您從左到右從上到下瀏覽它們，則不會有多余的空格，但是如果您像在屏幕截圖中那樣沿對角線單擊，則會添加空格以允許當前答案的長度，但不會重新排序先前的單元以利用空間。

為了解決這個問題，當您單擊一個答案時，您似乎必須重新放置一些答案框...僅按特定順序擴展它們會引起您所遇到的問題。 另一種選擇是在頁面的側面或底部有一個答案窗格/框架，該答案窗格/框架顯示答案而無需擴展問題框本身。 我無法想象每次單擊框時都需要自動重新排列框的算法...