CSS와 JavaScript를 사용하여 2열의 정렬되지 않은 목록을 만드는 방법은 무엇입니까?

순서가 지정되지 않은 목록을 두 개의 열로 표시하는 방법

순서가 지정되지 않은 목록을 두 개의 열로 표시하려면 브라우저에 따라 여러 가지 접근 방식이 있습니다. 호환성 요구 사항.

현대 브라우저:

CSS3은 여러 열 레이아웃을 쉽게 생성할 수 있는 열 모듈을 제공합니다. 다음 CSS 코드를 사용하면 목록을 두 개의 열로 나눌 수 있습니다.

ul {
  columns: 2;
}

레거시 브라우저:

Internet Explorer는 CSS3 열 모듈을 지원하지 않습니다. IE의 경우 목록을 열로 동적으로 재구성하려면 JavaScript 코드 솔루션이 필요합니다.

<div>
  <ul class="columns" data-columns="2">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
</div>

<script>
  (function($) {
    // JavaScript code to create the two-column layout
  })(jQuery);
</script>

참고: JavaScript 코드는 처음에 열을 다음과 같이 정렬합니다.

• A E
• B F
• C G
• D

OP의 요청에 따라 가로로 정렬하려면:

• A B
• C D
• 이자형 F
• G

updateColumns() 함수를 다음과 같이 수정합니다.

function updateColumns() {
  column = 0;
  columnItems.each(function(idx, el) {
    if (column > columns.length) {
      column = 0;
    }
    $(columns.get(column)).append(el);
    column += 1;
  });
}

위 내용은 CSS와 JavaScript를 사용하여 2열의 정렬되지 않은 목록을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!