jQuery+CSS拖拽放置偏移问题：未填满容器错位求助

这个偏移问题大概率是行内块元素的默认垂直对齐规则导致的，我来给你拆解一下：

为什么会偏移？ #

如果你的顶部可放置容器（dropzone）是用 display: inline-block 排列的，浏览器默认的 vertical-align 属性值是 baseline（基线对齐）：

• 空的dropzone的基线是它自身的底部边缘；
• 放入瓦片后的dropzone，基线会变成内部瓦片元素的基线（比如瓦片里的文本底部、或者瓦片容器的底部）。

这就导致空容器会被“往下拉”，直到它的基线和有内容容器的基线对齐，看起来就是偏移了。而当三个容器都填满时，所有容器的基线都统一了，自然就重新对齐了。

快速解决方法 #

只需要给你的可放置容器添加一行CSS，强制设置垂直对齐方式为顶部：

.dropzone {
  /* 你原本的样式：宽度、边框、margin等 */
  display: inline-block;
  vertical-align: top; /* 关键修复代码 */
}

其他可能的排查方向 #

如果上面的方法没解决，你可以检查这几点：

• 拖拽插件（比如jQuery UI Droppable）有没有给放置后的元素添加额外的 margin/padding 或者 position 样式；
• 如果是用Flex布局排列dropzone，检查父容器的 align-items 属性，默认是 stretch，如果需要顶部对齐可以设为 flex-start；
• 确认瓦片元素本身有没有自带的外边距，导致容器高度变化。

试一下上面的CSS修改，应该就能解决单个/两个容器填充时的偏移问题啦！

内容的提问来源于stack exchange，提问作者Brent