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

Question

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

请参阅此处的HTML示例（使用内联CSS）

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

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;
}