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

Question

나는 내 웹사이트에 사진 앨범을 만들기 위해 반응 사진 앨범을 사용하고 있습니다. 하단에 있는 사진 주위에 CSS 테두리를 설정할 수 있는지 궁금합니다. 하지만 서로 다른 높이를 고려하여 측면을 따라야 합니까? 현재 무슨 일이 일어나고 있는지: 나는 다음과 같은 것을 상상하고 있습니다: 나는 반응 사진 앨범--열 클래스에서 :last-child를 사용하여 그것을 얻을 수 있습니다: 그러나 내가 시도하는 것은 단지 전체 주위에 테두리가 나타나는 결과입니다. 컨테이너이며 하단에 있는 단일 사진이 아닙니다. 반대쪽에 스타일을 지정했습니다: .react-photo

P粉293550575 · Answer

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

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

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