Css 技巧：第n个子选择器

我花了一段时间来解决以下问题：

我希望通过在每五个元素中添加

clear:left

，将“无限”数量的浮动div在列中包装四个（对于较小的介质宽度，则不同）

我做了一把小提琴，它很好用。

但是无论我做什么，在布局中都会被破坏（最后两个项目被错误地包装，当我将其设置回

：nth child（4n+1）

时，它完全以不同的方式破坏。

---

那页上有我遗漏的东西吗？我不知道如何自己修复它。类别是

。bundled\u product

您的最后一个项目的类别是

。bundled\u product:n个孩子（4n+3）

其中包含

清除：左
，这就是它被放在新行中的原因。
您的所有
组件数据
容器都有第一个子
。kbnt项
和第二个子
。最小最大项
。最后一个
。组件数据
容器缺少
。kbnt项
子容器，这就是第三个的原因d此容器的子容器是第二个
。捆绑的\u产品

<div class="component_data">
  <div class="kbnt-items">0/1</div> <!-- missing in your last component_data... -->
  <div class="min_max_items"></div>
  <div class="bundled_prodct">...</div> 
  <div class="bundled_prodct">...</div> <!-- ... that's why this one is the '4n+3' element -->
</div>


0/1 
... 
... 
哦，我明白了，非常感谢你指出这一点。我认为应该只计算
。捆绑产品
类，而不是类中的每个孩子。我该如何正确地做到这一点呢？
.kbnt项
和
.min\u max\u项
是可选的（并基于用户设置）.As和在这里也没有帮助，因为
.kbnt项
和
.min\u max\u项
与
的类型相同。捆绑产品
-您可以将您的
捆绑产品
包装在另一个div中，这样您就可以使用第n个子选择器（没有
+
部分，只有4n）。产品将成为新创建容器中唯一的子容器，您不必关心不同数量的子容器。下面是一个演示包装器想法的示例。感谢您的回答，但这不是我要求的（请参见上面的正确答案）。