CSS Masonry 布局 - 列数不会改变

Question

我正在构建一个网站并将其加载到 Wordpress。我有一些公司页面使用 css 砌体效果来说明图像。目前，我将所有页面的列数设置为 5。我正在考虑放大图像并使用 4 或 3 的列数。但是，当我尝试更改列数时，没有任何反应。我在主页上为两个单独的部分使用了砌体，它们都设置为column-count: 4;，而且我对媒体查询有单独的规则。

我以为我可以通过将它们全部放在不同的包装器 div 下来对此进行排序，但是在我找不到的地方存在一些冲突。我创建了一个带有完整代码的代码笔，其中一个页面运行良好here。我已将笔设置为 3 列数，所以我知道这是可行的。

从笔中你可以看到我有一个带有“包装器”类的 div 来保存砖石。例如，在我的主页上 -

<div class="staff">
           <div class="masonry">            
                  <!-- code here -->              
                </div>
        </div>   

以及我对砌体部分的媒体查询（认为问题可能出在此处，但我似乎无法找到它）-

/* RWD for masonry partner templates */

@media only screen and (min-width: 300px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

     .staff .masonry {

      -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

}


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

}


@media only screen and (min-width: 480px) and (max-width: 750px)  {
     .staff .masonry {

      -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }


}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }


}



@media only screen and (min-width: 750px) and (max-width: 960px) {      

     .staff .masonry {

      -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }


}

@media only screen and (min-width: 960px) and (max-width: 1300px) {



     .staff .masonry {

      -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;

    }

}

@media only screen and (min-width: 1300px) {

     .staff .masonry {

      -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 560px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }



}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }


}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}


/* RWD for 'What we do' */

@media only screen and (min-width: 300px) {

     .whatwedo .masonry {

      -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 400px) {
    .whatwedo .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

}

@media only screen and (min-width: 560px) and (max-width: 750px) {

       .cols  {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

}    


@media only screen and (min-width: 750px) and (max-width: 960px) {


     .whatwedo .masonry {

      -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }


}

@media only screen and (min-width: 960px) and (max-width: 1300px) {


     .whatwedo .masonry {

      -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;

    }

}

@media only screen and (min-width: 1300px) {

   .whatwedo .masonry {

      -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

/* --------------------------------------------- */

Answer 1

抱歉 - 这可能是一个措辞不当的问题。问题就在这里 -

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }


}

所以，当我更改列数时，什么也没发生。我现在已经在主要样式规则中对此进行了调整，并且可以正常工作。