CSS를 사용하여 다중 열 목록을 만들고 Internet Explorer 호환성을 처리하려면 어떻게 해야 합니까?

CSS를 사용하여 목록에서 열 만들기

웹 페이지에 지나치게 스크롤되는 긴 목록이 있습니다. 가독성을 높이기 위해 목록이 커짐에 따라 광범위한 수동 조정 없이 이 목록을 여러 열에 표시하려고 합니다.

CSS는 간단한 솔루션을 제공합니다.

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

이 CSS 코드는 목록은 4개의 열로 나누어지며, 열 사이에는 20픽셀의 간격이 있습니다.

크로스 브라우저 호환성

열 생성을 위한 CSS 솔루션은 Internet Explorer 9 이하를 제외한 모든 브라우저에서 광범위하게 지원됩니다.

Internet Explorer의 대안

Internet Explorer 호환성이 필요한 경우 Columnizer jQuery와 같은 JavaScript 대안을 고려할 수 있습니다. 플러그인.

Internet Explorer용 Float로 대체

특히 Internet Explorer용 대안은 float 대체를 사용하는 것입니다. 이로 인해 항목 순서가 잘못될 수 있지만 시각적 모양은 유사합니다.

li {
    width: 25%;
    float: left
}

프로젝트에 이미 있는 경우 Modernizr을 사용하여 이 대체를 선택적으로 적용할 수 있습니다.

위 내용은 CSS를 사용하여 다중 열 목록을 만들고 Internet Explorer 호환성을 처리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!