이벤트에서 #livestream 채팅을 트리거하면 div.container.post::before에 큰 간격이 생깁니다. 태그로 변형을 트리거하기 전까지는 간격이 정상입니다.
CSS를 만져서 이 요소를 조정해 보았지만 해결하지 못했습니다. ::before를 숨기면 ::after가 나타납니다. 둘 다 숨기면 간격이 그대로 유지됩니다.
공식 스크린샷에는 이러한 간격이 보이지 않아 무슨 일이 일어나고 있는지 정확히 알 수 없습니다:
이 간격은 주제 타임라인(참고로 위 이미지)을 위한 것입니다. 그래서 clearfix가 없어도 공간이 여전히 존재합니다. 게시글이 하나뿐이거나, 타임라인이 비어 보일 때(관리자가 아닌 경우)에도 타임라인을 위한 공간이 여전히 남아 있어 빈 공간으로 보입니다.
새 게시글이 추가되고 주제 타임라인이 나타날 때 이 공간이 채워지면 일관성이 없거나 어색해 보일 수 있지만, 게시글이 하나뿐인 경우(타임라인 없음)에 전체 공간을 차지하게 하려면 다음을 사용할 수 있습니다:
@media screen and (min-width: 925px) {
.container.posts:not(:has(.timeline-scrollarea-wrapper)) {
grid-template-columns: 100%;
}
}
참고: .timeline-scrollarea-wrapper는 타임라인이 표시될 만큼 충분한 게시글이 있을 때만 나타납니다. 그래서 이 방법이 작동합니다.
관리자의 경우(플로팅 버튼 참조):
비관리자의 경우:
설정 버튼을 위한 작은 공간을 원한다면, 이 부분을 조정하거나 수정할 수 있습니다:
grid-template-columns: 90% 10%;
grid-template-columns: calc(100% - 80px) 80px;
레이아웃에서 무슨 일이 일어나고 있는지 이해하는 데 도움이 되나요, 아니면 완전히 해결해 주나요? 스크린샷의 clearfix가 우리가 재현한 것보다 약간 다른 간격을 차지하는 것을 보고 있어, 이 문제가 실제로 해결되는지 100% 확신할 수 없습니다.
개인적으로는 타임라인이 사용 가능하거나 불가능한 경우의 일관성을 위해 그대로 두는 것을 권장합니다. 하지만 변경을 원한다면, 주제 타임라인이 비어 있을 때 전체 폭을 차지하도록 하기 위해 위의 CSS가 충분할 것입니다. 이 부분에 대해 문제가 있거나 구현에 도움이 필요하면 알려주세요. 감사합니다.
4개의 좋아요