使用：nth-​​child伪选择器的CSS砌体网格？

Question

我试图在CSS中使用:nth-child创建一个砌体网格，但它似乎无法正常工作....

我的想法是让第一个项目宽度为33％，第二个宽度为66％ - 两者都对齐，

在第二行，第一项为66％宽度，第二项为33％宽度 - 均为对齐，

第五项在第三行100％宽度。

然后所有重复按照我刚才解释的顺序重复。

当我使用此css时：

  ul#comissions li:nth-child(4n-7){width:33%}
 { 
    width:33%
}

它应该选择每第四个li项，

然而，它选择每一个第二项目。 。 。

你知道为什么吗？

以下是我的html外观的一部分：

<section class="blog-list">
<ul id="comissions">

<li>


 <article class="entry cf hentry author-sinead-mccarthy post-type-text article-index-1" id="article-566586c6e4b00229eb49e5f7" data-item-id="566586c6e4b00229eb49e5f7">

     <div class="main-image-wrapper">

         <img src="myimg">
         fergerhgerh
     </div>
 </article>
 </li>
 <li>


  <article class="entry cf hentry author-sinead-mccarthy post-type-text article-index-1" id="article-566586c6e4b00229eb49e5f7" data-item-id="566586c6e4b00229eb49e5f7">

     <div class="main-image-wrapper">

         <img src="myimg">
         fergerhgerh
     </div>
</article>
 </li>
 <li>


   <article class="entry cf hentry author-sinead-mccarthy post-type-text article-index-1" id="article-566586c6e4b00229eb49e5f7" data-item-id="566586c6e4b00229eb49e5f7">

     <div class="main-image-wrapper">

         <img src="myimg">
         fergerhgerh
     </div>
</article>
 </li>
  <li>


    <article class="entry cf hentry author-sinead-mccarthy post-type-text article-index-1" id="article-566586c6e4b00229eb49e5f7" data-item-id="566586c6e4b00229eb49e5f7">

     <div class="main-image-wrapper">

         <img src="myimg">
         fergerhgerh
     </div>
</article>

Answer 1

查看jsFiddle

你的CSS可能是这样的：

ul#comissions li:nth-child(5n-4),
ul#comissions li:nth-child(5n-1){
  width: 33%
}
ul#comissions li:nth-child(5n-3),
ul#comissions li:nth-child(5n-2){
  width: 66%
}
ul#comissions li:nth-child(5n-0){
  width: 100%
}