Question

我正在尝试创建一个类似于砌体的列，而不必加载另一个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/

Answer 1

这些列垂直堆叠，而不是水平堆叠。所以它是：

item1  item4  item7

item2  item5

item3  item6

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

编辑：如果你想要完整的砌体行为，我的建议是使用jQuery Masonry插件。它不仅会涵盖很多你会错过的边缘情况，而且还会在广泛的网络浏览器中进行全面测试，你需要一个非常强大的理由来重新发明这个轮子。

Answer 2

不，您的代码正在运行。它只是没有响应，如果你使jsfidle浏览器窗口更大，你会看到3个colums。

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

2 个答案: