jquery - 使用 :nth-child pseudo-selector? 的 CSS 砌体网格

Question

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

我的想法是让第一个 li 元素宽度为 33%，第二个元素宽度为 66% - 两者对齐，

在第二行中，第一个元素 66% 宽度，第二个 li 元素 33% 宽度 - 两者对齐，

第五个元素出现在第三行 100% 宽度。

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

当我使用这个 css 时:

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

它应该选择每四个 li 项，

但是它会每隔一秒选择一个 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%
}