Erstellen Sie Ränder um Elemente unterschiedlicher Höhe

Question

Ich verwende React-Photo-Album, um ein Fotoalbum auf meiner Website zu erstellen.

Ich habe mich gefragt, ob es möglich ist, unten einen CSS-Rahmen um das Foto herum festzulegen, aber den Seiten zu folgen, um die unterschiedlichen Höhen zu berücksichtigen?

Was ist aktuell:

Ich stelle mir so etwas vor:

Ich konnte es mithilfe von :last-child in der Klasse „react-photo-album--column“ abrufen:

Aber alles, was ich versuche, führt nur zu einem Rand um den gesamten Container statt des einzelnen Fotos unten.

Ich habe die andere Seite gestylt:

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

Und Sie können den HTML-Code des Containers hier sehen. Meine Idee ist es, das letzte untergeordnete Element jeder React-photo-album--Spalte anzusprechen, ich weiß nur nicht, wie ich mit den Seiten umgehen soll.

Answer 1

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

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

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