建立圍繞不同高度的元素的邊框

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 中編寫函數來解決此問題，該函數檢查容器是否比前後容器更長或更短。基於此，您可以在每一側使用或不使用邊框（透過套用於容器的額外類別）。