html - div高度相等时CSS列不起作用

我正在尝试创建类似于砌体的列，而不必加载另一个JS插件。

我的HTML看起来像这样

<div class="masonry">
    <div class="item">
        <p class="item__par">texttexttexttext</p>
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p>
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p>
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p>
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p>
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p>
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
</div>

CSS：

.masonry {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count: 3;
}
.item {
    width: 273px;
    border:1px solid black;
    background: lightgray;
    display:inline-block;
    vertical-align:top;
    margin-right:50px;
    margin-bottom:50px;
}

不知道原因，但按列计数似乎不起作用。第二行的最后一个元素向下拉，而不是浮动到第二行的右侧。

更新：当块的高度相等时，会发生这种情况。当我更改内容时，列开始在水平方向上工作

请查看小提琴以获取更多信息，并分享您的经验。

http://jsfiddle.net/frontDev111/7Lcrt8kq/

最佳答案

这些列垂直堆叠，而不是水平堆叠。因此：

item1  item4  item7

item2  item5

item3  item6

您只需删除column-count属性即可实现所需的行为：http://jsfiddle.net/zephod/n42sqd4v/1/

编辑：如果您想要完整的砌体行为，我的建议是使用jQuery Masonry插件。它不仅涵盖了您可能会错过的许多优势案例，而且还在广泛的Web浏览器中进行了全面测试，并且您需要一个非常有力的理由来重新发明该轮子。