높이가 다른 부동 요소로 인해 깨진 레이아웃을 어떻게 수정할 수 있습니까?

레이아웃을 깨는 다양한 높이의 플로팅 요소

가변 높이의 플로팅 요소로 작업할 때 깔끔한 레이아웃을 유지하는 것이 어려울 수 있습니다. 그러한 시나리오 중 하나는 일부 요소가 다른 요소보다 커서 후속 형제 요소가 정렬에서 벗어나는 경우입니다.

이 문제를 해결하기 위해 CSS는 다음과 같은 영리한 솔루션을 제공합니다.

CSS 규칙 부동 요소 정렬

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

이 규칙은 브라우저에 부동 요소 첫 번째 요소부터 시작하여 세 요소마다. 즉,

• 첫 번째, 네 번째, 일곱 번째 요소 이후에는 부동 소수점이 지워지고 후속 형제가 새 줄을 시작할 수 있습니다.
• 이렇게 하면 두 번째 행의 요소는 해당 요소에 관계없이 처음 세 개 바로 아래에 정렬됩니다. heights.

예

제공된 HTML 및 CSS를 고려하세요.

<figure> // Figure 1
    ...
</figure>
<figure> // Figure 2
    ...
</figure>
<figure> // Figure 3
    ...
</figure>
<figure> // Figure 4
    ...
</figure>
<figure> // Figure 5
    ...
</figure>
<figure> // Figure 6
    ...
</figure>

figure {
    width: 30%;
    float: left;
    ...
}

clear: left 규칙을 추가하여 :

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

레이아웃이 수정되고 2열이 그림의 수가 처음 세 개 아래에 정렬됨:

[이미지: 두 번째 행의 그림이 처음 세 개 아래에 정렬된 수정된 레이아웃]

결론

활용 명확한: 왼쪽 규칙은 다양한 높이의 부동 요소가 적절하게 정렬되어 깨끗하고 체계적인 레이아웃을 유지하도록 하는 우아하고 효율적인 방법을 제공합니다.

위 내용은 높이가 다른 부동 요소로 인해 깨진 레이아웃을 어떻게 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!