如何重新排序内联块元素列表以填充所有空白区域？

Question

I need to reorder a list of elements with the attribute display: inline-block and with not defined width for fill all empty space.

You can understand what I mean with this example:

http://jsbin.com/ozuxip/1/edit

As you can see, in the first list, near "Not so long text" there is lot of white space, and in the second list that space is filled with two elements enough short for fill the space. I need to automatize it.

In this example you can see with a red rectangle what is the "white space" http://jsbin.com/ozuxip/7/edit

I can use PHP, jQuery, CSS etc. Do you have some advice?

Answer 1

If I understood your question properly, you basically want elements of different widths to create some kind of neat grid. If so, you could try using Isotope plugin: http://isotope.metafizzy.co/