HTML中的DIV动态更改，但添加空白

Question

I have been working on a dynamic question thingee(technical terms) but of course there is always some small hop that you need to overcome. My issue is that when I select 'show answer' on one of the question panels then the dividers add a massive white space between the rows. Basically the amount of questions asked are managed by the width of the screen, then via AJAX is gets the questions from index.php?questions&a={insertwidthofscreen*4} this is done via javascript and works automatically.

The code that I have is the following, it is called 'math.php' as a temp test: http://pastebin.com/MjGgSTYh Everything is generated via the above file and no external connections are made, the database stuff is easy and I will use my old system that keeps a track of what has already been shown.

The idea is that all the DIVS change height when the answer button is clicked, the height is dependent on the answer, the answer could vary from 1 word to a paragraph.

Screen shots of what I mean with the white space. http://imgur.com/KAOPHFI,wj0vWSg there is two photos in that, I didn't see the next button for a while.

Cheers, Leon

Answer 1

Since it isn't complete code (and therefore difficult for me to test myself) I'll just spitball this -- your qbox style (and possibly others?) have fixed width -- qbox is 200px. Should that be dynamic? (you also have width listed twice, but same value so it shouldn't matter in this case)

If you want to post more complete code that I can paste into a file myself, I'd be able to troubleshoot much easier.

Update:

I see what is happening now. The whitespace occurs when you click the answers in a particular order -- ie if you go through them left to right top to bottom, there is no extra whitespace, but if you click diagonally like in your screencap, the whitespace is added to allow for the length of the current answer, but doesn't reorder the previous cells to utilize the space.

In order to resolve this, it looks like you'll have to relocate some of the answer boxes when one answer is clicked on... just expanding them in a certain order will cause the issue you're seeing. Another option would be to have an answer pane/frame, on the side or bottom of the page, that shows the answer without expanding the question boxes themselves. I can't picture the algorithm you'd need to auto rearrange the boxes every time one is clicked...