使用float：left vs display：inline-block进行jQuery UI拖放排序比较

我这里有两个例子，这两个例子之间的区别只有一个是使用display：inline-block而另一个使用float：left，

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

我的问题是显示：内联块排序不像float：left那样快或响应。 我想使用display：inline-block，因为我重新排序的缩略图有时会在大小和浮动方面有所不同：当缩略图的高度和宽度不同时，left不能正常工作。

任何问题是如何使块：内联块像浮动一样快：左？

你可以在这里找到比较例： http ： //dev-server-2.com/drag-drop-sample/

Answer 1

我遇到了同样的问题，并认为我应该找出导致它的原因。

这是因为它们对浮动元素的处理方式不同，并且应该在内联块上进行区分。

试试这个补丁：

jQuery.ui.sortable.prototype._create = function() { var o = this.options; this.containerCache = {}; this.element.addClass("ui-sortable"); //Get the items this.refresh(); //Let's determine if the items are floating, treat inline-block as floating as well this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) || this.items[0].item.css('display') == 'inline-block' : false; //Let's determine the parent's offset this.offset = this.element.offset(); //Initialize mouse events for interaction this._mouseInit(); }; 

特别是这一行：

 this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) || this.items[0].item.css('display') == 'inline-block' : false; 

这会更改默认行为。 这是一个迟到的答案，但我在网上找不到任何其他答案，所以我认为这会对很多人有所帮助。

我将尝试提交修复此问题的jQuery补丁请求，但从1.8.9开始，这仍然是一个问题。

Answer 2

我会使用一个固定大小的容器float:left; 和text-align:center; 对于具有vertical-align:middle; max-height:100%; max-width:100%;的图像vertical-align:middle; max-height:100%; max-width:100%; vertical-align:middle; max-height:100%; max-width:100%; 无论尺寸如何，您的图像都将显示为马赛克。

我不知道你的情况是否可行？