使用 :nth-child 伪选择器的 CSS 砌体网格？答案

【问题标题】：Masonry grid with CSS using the :nth-child pseudo-selector?使用 :nth-child 伪选择器的 CSS 砌体网格？
【发布时间】：2015-12-08 20:44:26
【问题描述】：

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

我的想法是让第一个 li 项目 33% 宽度，第二个 66% 宽度 - 都对齐，

在第二行，第一项 66% 宽度，第二个 li 项 33% 宽度 - 都对齐，

第五个项目以 100% 的宽度出现在第三行中。

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

当我使用这个 css 时：

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

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

但是它选择每隔一个 li item 。 . .

你知道为什么吗？

这是我的 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>

【问题讨论】：

你能为此做一个小提琴吗？
hmm - 这是我 cms 的 html 输出。 . .我正在使用方形空间 - 非常有限我知道我会尽快尝试解决它，谢谢:)

标签： jquery css grid css-selectors

【解决方案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%
}

【讨论】：