2列左右不同高度的浮动图片

Question

我遇到了浮动2列的问题 - 只有2列而不是3列，因为其他问题已被提出 - 图像因此它们无间隙地组合在一起（如砖石，但没有砖石js）。我一直在想我有它的工作，因为它可以用于几张图像但不适用于其他图像。

我已经尝试了列数，但这会使每列的帖子对齐，我需要帖子水平对齐。从左到右阅读。

看起来像这样

我尝试通过在2张图片之后添加<div class="clear"></div>并使用nth-of-type或nth-of-child等等来添加清除（左/右，每n秒等所有组合）但我发现没有任何组合似乎适用于每个缩略图。

为什么我无法得到它所以每个nth-type（例如）如果奇数或右边都会向左移动？

Here's my Fiddle

我的CSS看起来像这样：

.container {
    width: 848px;
}
.thumbnail_small:nth-child(odd) {
    margin:0 0px 8px 8px;
    width: calc(50% - 12px);
    float:left !important;
    display:block;
}
.thumbnail_small:nth-child(even) {
    margin:0 8px 8px 0px;
    width: calc(50% - 12px);
    float:right !important;
    display:block;
}