我正在使用react-photo-album 在我的网站上创建一个相册。
我想知道是否可以在底部的照片周围设置 CSS 边框,但遵循侧面以考虑不同的高度?
目前是什么:
我正在想象这样的事情:
我能够在react-photo-album--column类上使用:last-child得到它:
但是我所做的任何尝试都只会导致整个容器周围出现边框,而不是底部的单张照片。
我已经为另一面设计了样式:
.react-photo-album { border-radius: 5px; border: 4px solid #86afe1; border-bottom: 0; padding: 3rem 2rem 2rem; }
并且可以在此处查看容器的 HTML,我的想法是针对每个 React-photo-album--column 的最后一个子项,我只是不知道如何处理侧面。
P粉2935505752024-03-31 00:22:29
您可以在照片容器 div 的侧面和底部放置边框。然后为这些 div 指定与整体背景(蓝色)相同的背景颜色,并将它们与要隐藏的边框重叠。所以基本上:
编辑: 再仔细考虑一下,只有当容器比前一个容器短时,这才有效。您可以通过在 javascript 中编写一个函数来解决此问题,该函数检查容器是否比前后容器更长或更短。基于此,您可以在每一侧使用或不使用边框(通过应用于容器的额外类)。