최신 브라우저와 기존 브라우저(Internet Explorer 포함) 간의 호환성을 보장하기 위해 두 열에 정렬되지 않은 목록을 표시하려면 어떻게 해야 합니까?

두 열에 순서가 지정되지 않은 목록 표시

웹 개발 세계에서는 순서가 지정되지 않은 목록을 여러 열에 표시하는 것이 일반적인 문제입니다. Internet Explorer와의 호환성을 보장하면서 이를 달성하는 방법을 두 개의 열에서 살펴보겠습니다.

최신 브라우저

최신 브라우저는 CSS3 열 모듈을 지원합니다. 해결책. 다음 CSS 코드를 포함하기만 하면 다중 열 목록을 손쉽게 만들 수 있습니다.

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

이 접근 방식은 최신 브라우저의 기본 기능을 활용하여 열 레이아웃을 처리하므로 다양한 기기에서 일관된 환경을 제공합니다.

기존 브라우저

안타깝게도 Internet Explorer 기본적으로 CSS3 열을 지원하지 않습니다. 레거시 브라우저를 지원하려면 JavaScript 및 DOM 조작을 사용하는 보다 복잡한 접근 방식이 필요합니다. jQuery를 사용한 구현 중 하나가 아래에 설명되어 있습니다.

<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>

(function($) {
  var initialContainer = $('.columns'),
    columnItems = $('.columns li'),
    columns = null,
    column = 1; // account for initial column

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

  function setupColumns() {
    columnItems.detach();
    while (column++ < initialContainer.data('columns')) {
      initialContainer.clone().insertBefore(initialContainer);
      column++;
    }
    columns = $('.columns');
  }

  $(function() {
    setupColumns();
    updateColumns();
  });
})(jQuery);

.columns {
  float: left;
  position: relative;
  margin-right: 20px;
}

이 솔루션은 지정된 열 수에 따라 목록 항목을 열로 동적으로 재정렬합니다. 그러나 레거시 브라우저는 레이아웃에 제한을 가할 수 있으며 잠재적으로 최신 브라우저와 약간 다른 표시가 발생할 수 있다는 점에 유의하는 것이 중요합니다.

이러한 접근 방식을 사용하면 정렬되지 않은 목록을 두 열에 효과적으로 표시할 수 있습니다. 최신 브라우저와 레거시 브라우저 모두에 대한 목록 콘텐츠의 체계적이고 체계적인 시각화.

위 내용은 최신 브라우저와 기존 브라우저(Internet Explorer 포함) 간의 호환성을 보장하기 위해 두 열에 정렬되지 않은 목록을 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!