다양한 높이의 요소 주위에 테두리 만들기

Question

제 웹사이트에 사진 앨범을 만들기 위해 React-Photo-Album을 사용하고 있습니다.

하단 사진 주위에 CSS 테두리를 설정할 수 있는지 궁금했는데, 높이가 다른 것을 고려하여 측면을 따르셨나요?

현재:

저는 이런 상상을 하고 있어요.

react-photo-album--column 클래스에서 :last-child를 사용하여 얻을 수 있었습니다.

하지만 제가 시도한 모든 것은 하단의 단일 사진 대신 전체 컨테이너 주위에 테두리가 생기는 결과를 가져왔습니다.

저는 반대쪽 스타일을 지정했습니다:

으아아아

그리고 컨테이너의 HTML은 여기에서 볼 수 있습니다. 제 생각은 각 React-photo-album--열의 마지막 하위 항목을 대상으로 하는 것입니다. 측면을 처리하는 방법을 모르겠습니다.

Answer 1

사진 컨테이너 div의 측면과 하단에 테두리를 배치할 수 있습니다. 그런 다음 이 div에 전체 배경(파란색)과 동일한 배경색을 지정하고 숨기려는 테두리와 겹칩니다. 기본적으로:

• 컨테이너 div에는 2rem 패딩이 있습니다
• 각 컨테이너는 왼쪽 컨테이너보다 z-index가 더 높습니다(겹침을 보장하기 위해)
• 각 컨테이너의 배경은 파란색입니다
• 첫 번째 컨테이너를 제외한 모든 컨테이너에는 컨테이너 경계를 지나 왼쪽으로 이동할 수 있는 -2rem의 왼쪽 여백이 있습니다.

편집자: 다시 생각해 보면 이는 컨테이너가 이전 컨테이너보다 짧은 경우에만 작동합니다. 컨테이너가 이전 및 다음 컨테이너보다 길거나 짧은지 확인하는 함수를 자바스크립트로 작성하여 이 문제를 해결할 수 있습니다. 이를 기반으로 컨테이너에 적용된 추가 클래스를 통해 각 측면의 테두리를 사용하거나 사용하지 않을 수 있습니다.