html - CSS 列数：3，渲染 2

Question

我正在用纯 CSS 制作一个简单的砌体样式布局。它看起来很干净和简单，但最后出现了一些错误。

JSFIDDLE：http: //jsfiddle.net/cheezburger/HXjtK/

CSS：

.masonry { /* Masonry container */
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 6px;
    -webkit-column-gap: 6px;
    column-gap: 6px;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 2px 0;
    width: 100%;
}

如您所见，我已经写了显示 3 列。第一排很好，但为什么不是其他的？这是一个已知的错误吗？