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。