Vertical alignment of DIV's using relative positioning and inline-block?

I have a problem aligning DIV's vertically, when the contents within them have different height (although the DIV's themselves have a fixed size).

See HTML example here 开发者_运维知识库(with inline CSS)

I want the DIV's to "flow" like text, so I'd like to avoid using position:absolute if possible. I'm using display: inline-block to the DIV's won't collapse.

Add a vertical-align property - it doesn't matter which one, they all do the same thing, since they're the same size. If they're different sizes, use vertical-align: middle:

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

Float them to the left:

.collection_box {
  float: left;
}