以给定类的最后一个奇数元素为目标
我有一个从 CMS 中提取的动态照片列表。照片有垂直的和水平的。我正在尝试创建一个“动态网格”,其中所有水平照片都是 100% 宽,垂直照片都是 50% 宽。 我在 JS 的帮助下实现了这一点。 codepen 与我的代码
但是,我无法定位具有水平镜头的最后一个奇怪的垂直镜头在它的前面。我希望这张照片也是 100% 宽,这样就不会出现不必要的中断。
我尝试使用 :nth-child() 伪类,但是,这根本没有帮助。 - 它只选择第一个孩子。
.wide + .portfolio-item:nth-last-child(odd) {
width: 100%;
}
I have a dynamic photo list, pulled from the CMS. Photos are vertical and horizontal. I am trying to create a "dynamic grid" where all horizontal photos are 100% wide and vertical photos are 50% wide.
I was able to achieve this with the help of JS.
codepen with my code
However, I have trouble targeting the last odd vertical shot that has a horizontal shot in front of it. I would like this photo to be 100% wide as well, so that there would be no unnecessary break.
I tried to use :nth-child() pseudo class but, that was not helpful at all. - its select only first child.
.wide + .portfolio-item:nth-last-child(odd) {
width: 100%;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好吧,我试图对它进行过多的思考,解决方案非常容易 -
在投资组合项目上,我应该使用:
Okay, I tried to overthink it, a solution was very easy -
on portfolio-item I should use: