일관되지 않은 플로트 높이로 인한 정렬 불량 문제를 해결하는 방법

일관되지 않은 부동 높이로 인한 정렬 오류에 대한 해결 방법: 1. 줄바꿈에서 시작하는 첫 번째 요소에 "clear:left;"를 추가합니다. 2. 상위 요소에 "font-size:0;"을 정의합니다. display: inline-block;vertical-align:top;"이면 충분합니다.

이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.

권장: css 비디오 튜토리얼

N개 요소가 부동되면 정렬 문제가 발생할 수 있습니다. 일반적으로 요소에 고정된 높이를 주면 이러한 현상이 발생하지 않습니다. 높이가 일치하지 않는 경우 해결 방법을 알려 드리겠습니다.

플로트 요소의 높이가 일관되지 않아 발생하는 정렬 불량을 해결하는 방법은 무엇입니까?

1. 해결책은 줄 바꿈에서 시작하는 첫 번째 요소에clear:left;를 추가하는 것입니다.

예를 들어 열이 4개라면 5번째나 9번째여야 합니다...clear:left;

.row .col-lg-3:nth-child(4n+1),
.row .col-md-3:nth-child(4n+1){
    clear:left;
}

4n+1 4개 열의 행을 선택하면 다음 행의 첫 번째 요소

둘째, 또는 상위 요소의 글꼴 크기를 정의합니다. :0; 부동 하위 요소에 필요한 글꼴 크기를 정의한 다음 display:inline-block;vertical-align:top;

ul{ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    font-size:0; 
} 
ul li{ 
    width:160px; 
    display:inline-block; 
    vertical-align:top; 
    font-size:12px; 
}

를 정의합니다.

위 내용은 일관되지 않은 플로트 높이로 인한 정렬 불량 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!