css - 复杂的 nth-of-type 选择器，:not() and uneven count of objects? 每四个元素清除一次

Question

我真的需要你的帮助，因为我不知道这是否可能或是否正确。

这是我的 HTML

因此，如您所见，我有一个 <ul>多个<li>在里面。让我的整个事情变得复杂的是有 <li class="wrapper year"> 的事实

所有这些 <li>的在 4 列中并排 float 。我需要一个 clear在每第 4 个元素之后，因此下一行在水平方向上处于同一水平。然而 <li class="wrapper year">元素被排除在这种行为之外，因为它们应该总是 clear:both .

首先，我知道这可能不是在 <li> 中也计算“年份”的完美 HTML 结构。元素，但基于后台的 CMS，可能无法以其他方式执行此操作!

这是CSS

ul.event-items li:not(.year):nth-of-type(4n+1) { clear: right; }
ul.event-items li:not(.year):nth-of-type(4n+2) { clear: left; }

Here is a live demo of the problem

这几乎可以正常工作，但我不明白为什么会发生以下情况？!

因此，如您所见，2012 年有 11 个元素，2011 年有 13 个元素，2010 年有 12 个元素。所以有所不同，因为这些元素基于 CMS。

float 和清除(在每 4 个 li 之后)似乎在 2012 年和 2011 年工作正常，但是当谈到 2010 年时，您可以看到在该行的第二个元素之后有一个清除。这是为什么？

Answer 1

很遗憾，此标记不适合您的数据。您试图获得的结果显然是两种不同标记方法中的一种。

1. 创建嵌套的无序列表

   Demo

2. 创建一个表很明显，每年都需要一个单独的表格，其中包含 TH 和标题以及包含 4 列的多行。

不要回避使用表格来表示表格数据。如果您 100% 确定您的数据不是表格形式，而是列出的，请为列表提供额外的深度以更好地表示您的数据。