javascript - 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-调色板容器:

.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/供引用