搜索

首页  >  问答  >  正文

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

我正在使用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粉165823783P粉165823783232 天前421

全部回复(1)我来回复

  • P粉293550575

    P粉2935505752024-03-31 00:22:29

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

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

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

    回复
    0
  • 取消回复