7

我在解决这个问题时遇到了一些麻烦。我查看了其他一些相关问题，但这些解决方案都不适合我。

this.$el.sortable({
    placeholder: 'ui-state-highlight',
    connectWith: '.connectedList',
    dropOnEmpty: true
});

尽管尝试了其他解决方案中发布的一些 CSS 技巧，但这些项目仍然被下推，如下图所示：

例子

您可以在此处查看代码示例：http: //jsfiddle.net/jxFBj/1/

4

1 回答 1

12

我想说问题的根源是内联元素的垂直对齐，默认情况下是基线。尽管最终触发问题的是内联和（内联）块元素的混合以及边距的使用。我想问题的实际根源是什么值得商榷。

无论如何，我无法确定发生了什么，但在我看来，占位符（没有内联内容）改变了基线的位置（不确定为什么），因此图像的位置，默认情况下是内联元素，也会发生变化。

有几种方法可以解决此问题：

制作图像块元素：

.sortableList-item img {
    display: block;
}

更新（13.01.2015）：对于最近的浏览器，这个display技巧似乎与vertical-align下面提到的问题相同，即元素确实水平移动。

http://jsfiddle.net/jxFBj/2/

使用浮动元素而不是内联块：

.ui-state-highlight {
    float: left;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.sortableList-item {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
}

http://jsfiddle.net/jxFBj/3/

将垂直对齐更改为top也可以，但是当列表元素跨越多行时会导致水平移动，因此这可能不是一个选项：

.ui-state-highlight {
    height: 100px;
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
}

.sortableList-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    vertical-align: top;
}

http://jsfiddle.net/jxFBj/4/

于 2013-01-14T11:50:04.907 回答