CSS重新計算第n個孩子

Question

我有一個2列布局的圖片庫。圖像庫可以包含2列圖像之間的1列全寬圖像。

見我Codepen舉例：

<div class="gallery"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img class="large" src="http://nosrc.io/400x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img class="large" src="http://nosrc.io/400x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
    <img src="http://nosrc.io/200x200"> 
</div> 

http://codepen.io/anon/pen/JdgBOb

爲什麼:nth-child選擇第二全寬度圖像後錯誤的庫項目？通常所有左列圖像應該有margin-left: 0;，所有右列圖像應該有margin-left: 2%;。

P.S.我無法使用JavaScript。

Answer 1

要真正得到這個工作正常（假設你的影像尺寸可能是動態的），你會需要使用.large:nth-of-type(...) ~ img，它會變得非常複雜（更不用說它可能不適用於一些較舊的瀏覽器）。更簡單的解決方案就是在所有圖像上使用1％的邊距：http://codepen.io/Godwin/pen/MwNBMK。

Answer 2

檢查一下。上面寫着：

.gallery img:nth-child(2n+1) { 
     margin-left: 0; 
} 

和：

.gallery img.large ~ img:nth-child(2n+1) { 
    margin-left: 2%; 
} 

在什麼位置使用該屬性的(2n+1)變化

Answer 3

不會這個夠了嗎？我知道，但那裏有在圖像的每一行不必要的右緣，但..

http://codepen.io/anon/pen/qdeyzP

我也重構了這奇怪的浮動結算的自由。

.gallery { 
    width: 400px; 
    overflow: hidden; 
} 

的bloaty的Insetad：

.gallery::before, 
.gallery::after { 
     content: " "; 
     display: table; 
} 

.gallery::after { 
     clear: both; 
} 
` 

由於overflow: hidden是對自己一個pretty good clearfix。

Answer 4

我不認爲nth-child正在做你認爲它正在做的事情。它不是相對於.large元素的第n個孩子;它相對於.gallery的所有img子女。如果您使用樣式檢查器並檢查應用於每個img的樣式，您應該能夠看到我的意思。

你可以嘗試這樣的規則：

.gallery img { 
    float: left; 
    width: 48%; 
    margin-right: 2%; 
    margin-bottom: 2%; 
} 

.gallery img.large { 
    width: 98%; 
} 

見http://codepen.io/anon/pen/NqQLYx。