html - CSS Masonry 布局 - 列数不会改变

Question

我正在构建一个站点并将其加载到 Wordpress 上。我有一些公司页面使用 CSS 砌体效果来说明图像。目前，我将所有页面的列数都设置为 5。我正在考虑放大图像并使用 4 或 3 的列数。但是，当我尝试更改列数时，没有任何反应。我在主页上为 2 个单独的部分使用砌体，这两个部分都设置为 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;
    }


}

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