無法修復子女保證金

我有一定數量的divs類「盒子」漂浮在海誓山盟旁邊。每4n + 1個div有一個額外的左邊距，通過使用第n個子（4n + 1）選擇器將其推到邊界。可以有無數的div類「盒子」。無法修復子女保證金

現在的問題是，在某些情況下，在第4n個元素之後動態地添加div類「special」。這當然會導致下一個box-divs失去他們想要的位置。因此，我嘗試了沒有成功的nth-type。

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="special"></div> 
<div class="box"></div>

CSS的第n個孩子：

.box:nth-child(4n+1){ 
    margin-left:25px; 
}

正如我不那麼熟悉的第n個孩子和第n-的類型選擇。所以我很確定我忽略了一些東西。爲每個4n + 1 box-div添加一個額外的類別不是一個選項。我要尋找一個CSS的解決方案

Example without "special" div

Example with "special" div

編輯：還沒有提供答案管理的特殊股利後，解決1行。但網絡與多個： Example multiple rows after "special"

希望儘可能多的瀏覽器兼容性儘可能。

來源

2013-07-11 Pepe

在結束我決定爲每個4n +1元素添加一個額外的類。比預期的更容易。然而，我很想看到我的問題的解決方案。 – Pepe

改用

div > .box:first-child, 
.special + .box { 
    margin-left:25px; 
}

這是一個有點老款式比nth-*，但它的作品甚至IE7

來源

2013-07-11 16:14:59 fcalderan

你能解釋一下我的代碼嗎？正如你所說，它也適用於IE7，我會接受你的答案。也感謝atif的工作答案！編輯：如果沒有特殊的div，第二行是不滿意的... Atif的確。 – Pepe

是的沒有它不會工作，但你的問題清楚地說：*爲每個4n + 1 box-div添加一個額外的類是不是一個選項* – fcalderan

uhu。但是，我的問題仍然沒有完全解決。任何更多的想法，我會很高興聽到 – Pepe

如何

.special + .box, 
.box:nth-child(4n+1) { 
    margin-left:25px; 
}

演示：http://jsfiddle.net/VdJmC/6/

如果你改變

<div class="special"></div>

別的東西像

<p class="special"></p>

然後下面的代碼會做你想要什麼（不工作，直到IE8）

.special + .box, 
.box:nth-of-type(4n+1) { 
    margin-left:25px; 
}

演示 - http://jsfiddle.net/VdJmC/11/

來源

2013-07-11 16:15:09

那麼這個+是什麼意思 –

'+'是直接鄰接選擇器。 – fcalderan

.special + .box意味着.box出現後立即.special –

無法修復子女保證金

回答

相關問題