我有一个包含 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。
最佳答案
要真正让它正常工作(假设您的图像尺寸可能是动态的),您需要使用 .large:nth-of-type(...) ~ img
而且它会变得非常复杂(更不用说它可能无法在某些旧浏览器上运行)。一个更简单的解决方案是对所有图像使用 1% 的边距:http://codepen.io/Godwin/pen/MwNBMK .
关于CSS重新计算第n个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32208642/