Div没有处于正确的位置

Question

我正在使用Spectrum color picker plugin。有2个容器。 1 - .sp-picker-container和.sp-palette-container。使用float创建容器的布局。我不想要那个，因为这不是正确的解决方法。 （见this answer for reference。）

我改为使用了display: inline-block，删除了，或者更准确地将float设置为none。当我这样做时，颜色选择器（右侧的容器）被推下一点。

我如何制作display: inline-block和float: none，并将右侧容器置于顶部，并将左侧容器顶部调平？

相关代码：

.sp-picker-container,
.sp-palette-container {
  float: none;
  display: inline-block;
}

JSFiddle

我尝试添加代码段，但问题不会发生在代码段中。

Answer 1

尝试将属性vertical-align:top添加到.sp-picker-container, .sp-palette-container：

.sp-picker-container,
.sp-palette-container {
  float: none;
  display: inline-block;
  vertical-align: top;
}

请参阅http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/以获取参考资料