CSS를 사용하여 긴 목록을 여러 열로 나누려면 어떻게 해야 합니까?

CSS를 사용하여 목록을 열로 나누기

길고 좁은 목록을 여러 열에 표시하면 웹페이지 가독성을 높이고 과도한 스크롤의 필요성을 줄일 수 있습니다. 이 문서에서는 이 작업을 수행하기 위한 CSS 기술을 살펴봅니다.

CSS 다중 열 솔루션

CSS 다중 열 사양을 지원하는 최신 브라우저의 경우 다음을 사용할 수 있습니다. 속성:

ul {
    column-count: 4;
    column-gap: 20px;
}

이렇게 하면 목록이 자동으로 20픽셀의 간격을 두고 4개의 열로 나뉩니다.

IE용 JavaScript 대체

IE 9 이하에서는 다중 열 레이아웃을 지원하지 않으므로 JavaScript 대체가 필요합니다.

1. Columnizer와 같은 jQuery 플러그인 사용 (http://welcome.totheinter.net/columnizer-jquery-plugin/).
2. float: left를 사용하고 각 목록 항목의 적절한 너비를 계산하는 수동 대체 솔루션을 구현합니다(http: //jsfiddle.net/NJ4Hw/).

추가 참고

• -moz- 및 -webkit- 접두사는 이전 버전의 Firefox 및 Safari와의 호환성을 위해 사용됩니다.
• 폴백 솔루션은 올바른 순서를 유지하지 못할 수 있습니다. IE의 항목을 나열합니다.
• 다양한 브라우저 간 호환성을 보장하려면 크로스 브라우저 테스트 도구를 사용하는 것이 좋습니다. 브라우저.

위 내용은 CSS를 사용하여 긴 목록을 여러 열로 나누려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!