html - 当 div 具有相同高度时，CSS 列不起作用

Question

我正在尝试制作类似于 masonry 的柱子，而无需加载另一个 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;
}

不知道原因，但 columns-count 并没有像看起来那样工作。第二行的最后一个元素是下拉而不是 float 到第二行的右侧。

更新:当 block 具有相同的高度时会发生这种情况。当我更改内容时，列开始水平显示

请查看 fiddle 以获得更清晰的信息并分享您的经验。谢谢

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

Answer 1

这些列是垂直堆叠的，而不是水平堆叠的。就这样:

item1  item4  item7

item2  item5

item3  item6

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

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