水平可滚动的div容器，里面有较小的div

Question

在我的网站中，我有一个包含较小div的div容器，这些较小的div水平排列，以便水平滚动。我希望它们看起来像这样，

+-Container------------------+
| +-a-+  +-b-+  +-c-+  +-d-+ |
| |   |  |   |  |   |  |   | |
| +---+  +---+  +---+  +---+ |
+----------------------------+

但不知怎的，它看起来像这样：

+-Container------------------+
| +-a-+         +-c-+        |
| |   |  +-b-+  |   |        |
| +---+  |   |  +---+  +-d-+ |
+----------------------------+

这是我的css代码：

#a,#b,#c,#d{
    display: inline-block;
    margin-left: 2.5%;
    height: 450px;
    white-space: normal;
}
#container{
    display: block;
    margin: auto;
    overflow-x: auto;
    white-space: nowrap;
    height: 450px;
}

看起来顶部的空间取决于每个框中的内容量（来自游戏）。使用水平滚动时，有没有办法强制盒子粘在容器的顶部？这应该是首先发生的吗？

Answer 1

您必须将默认垂直对齐值从baseline更改为top。

#a, #b, #c, #d{
  vertical-align: top;
}

参考：vertical-align