반응형 레이아웃을 사용하여 열에 목록 항목을 표시하는 방법은 무엇입니까?

반응형 레이아웃에서 목록 항목을 열로 표시

브라우저 너비에 따라 목록 항목을 세로로 표시하려는 목표는 다음을 사용하여 달성할 수 있습니다. CSS3 열. 방법은 다음과 같습니다.

HTML을 사용하여 목록 항목을 <div> 고정된 높이를 사용하고 열 개수 속성을 사용하여 열 수를 지정합니다.

<div>

CSS에서 컨테이너의 높이를 정의하고 각 목록 항목이 인라인 블록으로 표시되는지 확인합니다.

#limheight {
  height: 800px;
  column-count: 3;
}

#limheight li {
  display: inline-block;
}

브라우저 크기가 조정되면 CSS3는 자동으로 열 수를 조정하고 목록 항목을 재정렬하여 표시를 최적화합니다. 표시되는 특정 열 수는 사용 가능한 너비와 목록 항목 자체의 너비에 따라 달라집니다.

이 기술을 사용하면 목록 항목이 열과 함께 세로선으로 표시되는 반응형 레이아웃을 얻을 수 있습니다. 브라우저 크기에 따라 동적으로 조정됩니다.

위 내용은 반응형 레이아웃을 사용하여 열에 목록 항목을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!