棘手：nth-​​child选择器

Question

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

我希望通过向每个第五个元素添加clear:left来将“无限”数量的浮动div包含在列中（并且对于较小的媒体宽度不同）;

我做了一个小提琴，它的工作正常。 https://jsfiddle.net/kybernaut/zqnkxa3h/1/

但无论我做什么，在real situation中布局都会被打破（最后两个项被错误地包裹起来，当我将其设置回:nth-child(4n+1)时，它会完全打破另一种方式。 那页上有什么我想念的吗？我不知道如何自己修复它。该课程为.bundled_product

Answer 1

您的所有.component-data容器都有第一个孩子.kbnt-items和第二个孩子.min_max_items。最后一个.component-data容器缺少.kbnt-items子容器，这就是为什么此容器的第三个子容器是此处的第二个.bundled_product。

<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>

Answer 2

您的上一个项目包含..bundled_product:nth-child(4n+3)类，其中包含clear: left，这就是为什么将它放入新行。