html - 不能在媒体查询中使用列数

我有带column-count属性的CSS代码，由于某种原因，它在媒体查询中不起作用！

.masonry {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
}

@media only screen and (max-width: 768px) {
    .masonry {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (max-width: 425px) {
    .masonry {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
.item {
    display: inline-block;
}

这是HTML代码：

<div class="masonry">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
</div>

那么，谁能帮助我找出代码有什么问题或我做错了什么？

实际上，当我测试它时，媒体查询没有显示在Chrome上的检查中，但是当我尝试放置另一个属性（例如color）时，它起作用了！

最佳答案

只是摆脱

.item {
    display: inline-block;
}

由于column-count用自己的高度分割div，而inline-block使所有div都在同一行上。