使用相對定位和內聯塊垂直對齊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;
}