>  기사  >  웹 프론트엔드  >  HTML5/CSS는 다른 열의 상호 높이를 기준으로 목록 항목을 정렬합니다.

HTML5/CSS는 다른 열의 상호 높이를 기준으로 목록 항목을 정렬합니다.

王林
王林앞으로
2023-08-19 15:29:12870검색

HTML5/CSS는 다른 열의 상호 높이를 기준으로 목록 항목을 정렬합니다.

Flex를 사용하여 목록 항목을 정렬합니다. Flex는 내용에 따라 열을 유연하게 만듭니다. 래퍼는 열을 행으로 배치합니다.

.wrap{
   display : flex
}// This will help wrapper to become flexible
.wrap.col{
   flex: 1 0 33%;
}

Flex는 기본적으로 요소를 유연하게 만드는 데 도움이 되는 속성입니다.

다음 코드를 사용하여 목록을 아래쪽에 수직으로 정렬하세요 −

.col .content {
   margin-top: auto;
}

위 내용은 HTML5/CSS는 다른 열의 상호 높이를 기준으로 목록 항목을 정렬합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제