가변 높이 부동 요소로 인한 레이아웃 왜곡을 방지하려면 어떻게 해야 합니까?

가변 높이 플로팅 요소를 사용한 레이아웃 왜곡

플로팅 레이아웃에서 가변 높이 요소로 작업할 때 키가 더 큰 상황이 발생하는 것은 드문 일이 아닙니다. 요소가 후속 형제 요소를 아래로 밀어내며 의도한 그리드 구조를 깨뜨립니다.

다음을 고려하세요. 예: 6개의 그림 요소는 3개의 행으로 구성된 2개의 행을 형성하도록 설계되었습니다. 그러나 요소의 높이가 다양하기 때문에 네 번째 그림 요소가 첫 번째 행을 넘어 확장되어 다섯 번째와 여섯 번째 요소가 오프셋됩니다.

이 예에 사용된 CSS는 간단합니다.

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

레이아웃 왜곡을 해결하기 위해 각 행의 첫 번째 요소를 구체적으로 대상으로 하는 CSS 규칙을 도입할 수 있습니다. 왼쪽 부동소수점을 지워 후속 형제 항목이 그 아래에 수평으로 정렬되도록 합니다.

figure:nth-of-type(3n+1) {
    clear:left;
}

이 규칙은 네 번째 그림 요소가 새 행을 시작하도록 강제하여 정렬 문제를 해결합니다. 이후 다섯 번째와 여섯 번째 요소는 처음 세 개 아래에 올바르게 배치됩니다.

업데이트된 예시 레이아웃은 이제 의도한 대로이며, 각 행은 높이 차이에 관계없이 균일한 간격의 그림 요소 3개로 구성됩니다.

위 내용은 가변 높이 부동 요소로 인한 레이아웃 왜곡을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!