Div 位置不正确

Question

我正在使用 Spectrum color picker plugin. There are 2 containers. 1 - .sp-picker-container and .sp-palette-container. The layout of the containers are created with float. I don't want that because that isn't the correct way to lay things out. (see this answer for reference。）

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

如何做到 display: inline-block 和 float: none，并使右侧容器在顶部，与左侧容器顶部齐平？

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/

Div 位置不正确

Div isn't in correct position

html

javascript

css

jquery

spectrumjs

JSFiddle