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。 那应该是动态的吗？ （您也列出了两次宽度，但是值相同，所以在这种情况下没关系）

如果您想发布更完整的代码以供我自己粘贴到文件中，则可以更轻松地进行故障排除。

更新：

我知道现在发生了什么。 当您按特定的顺序单击答案时，会出现空白-即，如果您从左到右从上到下浏览它们，则不会有多余的空格，但是如果您像在屏幕截图中那样沿对角线单击，则会添加空格以允许当前答案的长度，但不会重新排序先前的单元以利用空间。

为了解决这个问题，当您单击一个答案时，您似乎必须重新放置一些答案框...仅按特定顺序扩展它们会引起您所遇到的问题。 另一种选择是在页面的侧面或底部有一个答案窗格/框架，该答案窗格/框架显示答案而无需扩展问题框本身。 我无法想象每次单击框时都需要自动重新排列框的算法...