Html 可水平滚动的div容器，内部有较小的div

在我的网站中，我有一个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;
}

---

看起来顶部的空间是由每个框中的内容量决定的（从播放开始）。当使用水平滚动时，有没有办法迫使箱子粘在容器顶部？这应该首先发生吗？

您必须将默认的垂直对齐值从

基线

更改为

顶部

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

参考：