我这里有两个例子， 这两个示例之间的唯一区别是 一种使用 display:inline-block，另一种使用 float:left,
li.doc_item{display:inline-block;} 对比 li.doc_item{float:left;}
我的问题是 display:inline-block 排序不如 float:left 快或响应快。 我想使用 display:inline-block 因为我正在重新排序的缩略图 有时大小和浮动：当缩略图具有不同的高度和宽度时，左侧效果会有所不同。
任何问题是如何让 block:inline-block 和 float:left 一样快？
您可以在此处找到比较示例： http://dev-server-2.com/drag-drop-sample/
【问题讨论】：
标签： javascript jquery css jquery-ui-sortable
我遇到了同样的问题，我想我应该找出导致它的原因。
这是因为它们对浮动元素的处理方式不同，也应该在 inline-block 上进行区分。
试试这个补丁：
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 开始，这仍然是一个问题。
【讨论】：
对于带有vertical-align:middle; max-height:100%; max-width:100%; 的图像，我会使用带有float:left; 和text-align:center; 的固定大小的容器
无论尺寸如何，您的图像都将显示为马赛克。
不知道你的情况是否可行？
【讨论】：