CSS3를 사용하여 열을 동적으로 조정하는 반응형 목록 레이아웃을 만드는 방법은 무엇입니까?

CSS3을 사용하여 열에 목록 항목 표시

문제 설명:

반응형 레이아웃 구축 브라우저 너비에 따라 결정되는 열 수를 사용하여 목록 항목을 세로로 표시해야 합니다.

CSS3 솔루션:

CSS3 열은 이 레이아웃에 대한 효율적인 솔루션을 제공합니다.

#limheight {
    height: 300px; /* Define the container's height */
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /* Specify the desired number of columns */
}

#limheight li {
    display: inline-block; /* Ensure each list item is treated as a block element */
}

예:

<ul>

브라우저 창이 충분히 넓으면 목록 항목이 세 개의 열로 표시됩니다.

1  4  7
2  5  8
3  6  9

브라우저 창이 좁아지면 시각적으로 매력적인 레이아웃을 유지하기 위해 열이 동적으로 조정됩니다.

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