创建围绕不同高度的元素的边框

Question

我正在使用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 的最后一个子项，我只是不知道如何处理侧面。

Answer 1

您可以在照片容器 div 的侧面和底部放置边框。然后为这些 div 指定与整体背景（蓝色）相同的背景颜色，并将它们与要隐藏的边框重叠。所以基本上：

• 您的容器 div 有 2rem 内边距
• 每个容器的 z-index 都高于其左侧的容器（以确保重叠）
• 每个容器都有蓝色背景
• 除第一个容器外，每个容器的左边距均为 -2rem，以便越过容器的边框向其左侧移动

编辑： 再仔细考虑一下，只有当容器比前一个容器短时，这才有效。您可以通过在 javascript 中编写一个函数来解决此问题，该函数检查容器是否比前后容器更长或更短。基于此，您可以在每一侧使用或不使用边框（通过应用于容器的额外类）。