CSS로 다중 열 목록을 어떻게 만들 수 있나요?

CSS를 사용하여 열에 목록 표시

짧은 항목이 포함된 긴 목록이 있고 더 간결한 형식으로 표시하려는 경우, 열로 분할하는 것을 고려해보세요. CSS는 이에 대한 간단한 솔루션을 제공합니다.

CSS 다중 열 레이아웃

CSS 다중 열 레이아웃 모듈을 사용하면 요소. 적용 방법은 다음과 같습니다.

ul {
    column-count: 4;  /* The number of columns */
    column-gap: 20px; /* Space between columns */
}

이 코드는 4개의 열 사이에 20px 간격을 두고 목록을 렌더링합니다.

브라우저 지원

CSS 다중 열 레이아웃은 Internet Explorer 9을 제외한 모든 최신 브라우저에서 지원됩니다. 이전.

Internet Explorer용 대안

Internet Explorer 지원이 필요한 경우 Columnizer jQuery 플러그인과 같은 JavaScript 솔루션을 사용할 수 있습니다.

Internet Explorer에서 Float로 대체

대체로, CSS 부동을 사용하여 Internet Explorer에서 유사한 레이아웃을 얻을 수 있습니다. 그러나 이 방법은 항목의 순서를 유지하지만 열 구조는 유지하지 않습니다.

li {
    width: 25%;
    float: left
}

참고: 이 대체 방법은 Internet Explorer만 대상으로 하는 Modernizr 또는 유사한 조건부 로딩 기술과 함께 사용할 수 있습니다. .

위 내용은 CSS로 다중 열 목록을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!