jQuery UI drag/drop sorting comparision using float:left vs display:inline-block

Question

I have two examples here, only difference between these two example are one uses display:inline-block and other one uses float:left,

li.doc_item{display:inline-block;} vs li.doc_item{float:left;}

My problem is display:inline-block sorting is not as fast or responsive as float:left. I want to use display:inline-block because thumbnails that I am re-ordering sometimes can vary in size and float:left doesn't work well when thumbnails have different height and width.

Any question is how to make block:inline-block as fast as float:left ?

You can find comparative example here: http://dev-server-2.com/drag-drop-sample/

Answer 1

I would use a fixed-sized container with float:left; and text-align:center; for an image with vertical-align:middle; max-height:100%; max-width:100%; Your images would be displayed as a mosaic whatever their dimensions.

I don't know if it's possible in your case ?