Question

我有这个带有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之类的属性时，它起作用了！

Answer 1

简单地摆脱

404 Not Found

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

Answer 2

.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 {
  
}

<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>

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

2 个答案: