使用相对定位和内联块垂直对齐DIV？

Question

我有一个问题是垂直对齐DIV，当它们内的内容有不同的高度时（虽然DIV本身有固定的大小）。

See HTML example here (with inline CSS)

我希望DIV像文本一样“流动”，所以我想尽可能避免使用position:absolute。我正在使用display: inline-block对DIV不会崩溃。

Answer 1

添加vertical-align属性 - 无论哪一个，它们都做同样的事情，因为它们的大小相同。如果尺寸不同，请使用vertical-align: middle：

.collection_box {
    vertical-align: middle; /* or top, or bottom, if they're the same size */
}

Answer 2

将它们浮在左边：

.collection_box {
  float: left;
}