CSS重新计算第n个 child

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%;。

附言我不会使用 JavaScript。

Answer 1

要真正让它正常工作(假设您的图像尺寸可能是动态的)，您需要使用 .large:nth-of-type(...) ~ img而且它会变得非常复杂(更不用说它可能无法在某些旧浏览器上运行)。一个更简单的解决方案是对所有图像使用 1% 的边距:http://codepen.io/Godwin/pen/MwNBMK .