1

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

这是我的 HTML

所以，正如你所看到的，我有一个<ul>with multiple <li>。让我的整个事情变得复杂的是其中有一个事实<li class="wrapper year">。

所有这些<li>都在 4 列中并排浮动。我需要clear在每 4 个元素之后添加一个，以便下一行水平处于同一水平。但是，这些<li class="wrapper year">项目被排除在此行为之外，因为它们应该始终clear:both。

首先，我知道这可能不是完美的 HTML 结构，在<li>元素中也包含“年份”计数，但基于背景中的 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; }

这是问题的现场演示

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

因此，您可以将 2012 年视为 11 项的计数，2011 年有 13 项，2010 年有 12 项。所以变化是因为这些项目是基于 CMS 的。

浮动和清除（每 4 次之后li）似乎在 2012 年和 2011 年工作得很好，但是当谈到 2010 年时，您可以看到在这一行的第二个元素之后有一个清除。这是为什么？

4

2 回答 2

2

不幸的是，此标记不适合您的数据。您试图清楚地实现两种不同标记方法之一的结果。

  1. 创建嵌套无序列表

    演示

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

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

于 2012-10-04T08:47:14.480 回答
0

这是因为您的选择器而发生的：

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

你在2011年是一个“孤儿”。所以2010年的第三个li实际上是上面规则的目标。可以做的就是li在2011年底加两个“空白”。

检查演示（黄色的是“空白”）。您可以根据需要隐藏它们（与容器等的背景颜色相同）

随着时间的推移，我敢肯定，这种结构会给你带来很多麻烦。如果你不能把它分成很多uls，至少使用一些其他的类和标记......

与其使用 nth-of-type 来定位 clearing lis，不如为它们添加一个类（例如clear-left，您实际上并不需要clear:right;）。html 会有点“重”，但肯定更安全。

检查此更新的演示以获取另一种无需nth-of-type和clear:right;

如果您想使用 jQuery 动态添加 clear-left，请查看此演示。

这是我使用的功能：

$('li.year').each(function(){
    $(this).nextAll('li').each(function(i){
        var li = $(this);
        /* break the loop when a new year is found */
        if(li.hasClass('year')) return false; 
        /* add clear-left to each 5th element */
        if( i > 0 && i % 4 == 0 ) li.addClass('clear-left');                      
    });
});​
于 2012-10-04T08:02:57.357 回答