가변 높이의 부동 요소로 인한 레이아웃 왜곡을 수정하는 방법은 무엇입니까?

레이아웃을 왜곡하는 가변 높이의 플로팅 요소: 포괄적인 수정

다양한 높이의 플로팅 요소를 사용할 때 키가 더 큰 경우 레이아웃 문제가 발생하는 것이 일반적입니다. 요소가 후속 형제 항목을 올바르게 정렬하는 것을 방해합니다. 이는 하나의 늘어난 요소로 인해 부동 요소 행이 분리되는 경우와 같이 제공된 예에서와 같이 바람직하지 않은 모양으로 이어질 수 있습니다.

이 문제를 해결하려면 CSS를 활용하여 적절한 정렬을 보장할 수 있습니다. 다음 규칙을 추가하여

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

모든 세 번째 그림 요소가 왼쪽을 "지우도록" 지정합니다. 이렇게 하면 부동 시퀀스가 ​​효과적으로 종료되고 후속 요소가 처음 세 개 아래에 정렬됩니다.

이 솔루션은 JavaScript나 jQuery와 같은 외부 도구 없이도 의도한 레이아웃을 유지하므로 효율적이고 시각적으로 매력적입니다.

실시간 데모

수정된 jsFiddle 예제를 참조하여 모든 그림 요소의 원활한 정렬을 확인하세요. 다양한 높이에 관계없이: http://jsfiddle.net/KatieK/5Upbt/

위 내용은 가변 높이의 부동 요소로 인한 레이아웃 왜곡을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!