reactjs 使边框环绕具有不同高度的元素？

ruarlubt 于 2023-01-04 发布在 React

关注(0)|答案(1)|浏览(145)

我正在使用React相册有一个相册在我的网站上。
我想知道是否有可能有一个CSS边框包裹在底部的照片，但以下双方，以说明不同的高度？
目前是：

我在想象这样的场景：

我能用的是：React相册专栏类的最后一个孩子：

但我所做的任何尝试都只会导致整个容器周围出现边框，而不是底部的个别照片。
我已经把另一面设计成：

.react-photo-album {
    border-radius: 5px;
    border: 4px solid #86afe1;
    border-bottom: 0;
    padding: 3rem 2rem 2rem;
}

并且容器的HTML可用于查看here，我的想法是针对每个react-photo-album列的最后一个子列，我只是不知道如何处理两侧。

1条答案

您可以在照片容器div的侧面和底部添加边框，然后为这些div设置与整体背景相同的背景色（蓝色），并将这些边框与您想要隐藏的边框重叠。

你的容器分区有2雷姆的填充
每个容器的z轴都比其左侧的容器高（以确保重叠）
每个容器都有蓝色背景
除第一个容器外，每个容器都有-2rem的margin-left，以便越过容器的边界移动到其左侧
**编辑：**再仔细想想，这只在一个容器比前一个容器短的情况下有效。你可以通过用javascript写一个函数来检查一个容器比前一个容器长还是短来解决这个问题。基于这个，你可以在每一边使用或不使用边框（通过对容器应用额外的类）。