複雜的n型選擇器有：not（）和不均勻的對象數量？清除每四個元素

我真的需要你的幫助，因爲我不知道這是否可能或正確。複雜的n型選擇器有：not（）和不均勻的對象數量？清除每四個元素

這是我的HTML

所以，你可以看到我有一個<ul>多<li>的在裏面。而讓我的整個事情變得複雜的是其中有<li class="wrapper year">的事實。

所有這些<li>的是在4列並列漂浮。每4個元素後我需要一個clear，所以下一行在同一個水平上是水平的。但是<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; }

Here is a live demo of the problem

這幾乎工作得很好，但我不知道爲什麼下面發生的事情？

因此，正如您可以看到2012年爲11個項目的計數，2011年有13個項目，2010年有12個項目。所以，因爲這些項目是基於CMS的變化。

浮動和結算（每4日後li）似乎在2012年和2011年都可以正常工作，但到了2010年時，您可以看到在該行的第二個元素之後有明確的結果。這是爲什麼？

來源

2012-10-04 matt

而不是張貼一個巨大的圖像，發佈有問題的代碼在http://jsfiddle.net的現場演示 – Blender

這裏是演示：http://jsfiddle.net/wQTBh/ – matt

它可能只是我，但你的演示只是隨機黑塊，看起來不像你在這裏發佈的圖片。 CSS是一樣的嗎？ – Blender

它的發生，因爲你的選擇的：

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

你已經是「孤兒」在2011年因此，在2010年第三次李實際上是由上面的規則的目標。您可以做的是在2011年底添加兩個「空白」li s。

檢查demo（黃色是「空白」）。你可以隱藏它們（與容器相同的背景色）

隨着時間的推移，我確信，這個結構會給你帶來很多麻煩。如果你不能在許多ul小號把它，至少使用一些其他類和標誌等

而是針對與第n-的型清理li S的，將它們添加一個類（如：clear-左，你其實不需要clear:right;）。 html會稍微「重一點」，但它肯定更安全。

入住這updated demo另一種方式做到這一點不nth-of-type和clear:right;

如果你想添加明確的離開與jQuery，check this demo動態。

這是我使用的功能：很不幸，這標記是不適合你的數據

$('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-04 08:02:57 Giona

你提到的選擇器實際上與它無關。 – Christoph

@Christoph你可以使用chrome開發者工具或bugzilla嗎？覈實。 – Giona

他在上一個問題中也介紹了選擇器的問題，我在評論中提到了這個問題。 – BoltClock

。您試圖清楚地實現2種不同的標記方法之一的結果。

創建嵌套的無序列表

Demo
創建一個表顯然每年需要一個單獨的表與TH和標題和蒙山在這4列多行。

不要回避使用表格來表示表格數據。如果您100％確定您的數據不是表格，而是列出的，請給列表一個額外的深度以更好地表示您的數據。

來源

2012-10-04 08:47:14 Brdavs

複雜的n型選擇器有：not（）和不均勻的對象數量？清除每四個元素

回答

相關問題