먼저 렌더링을 보여 드리겠습니다. 꽤 좋다고 생각되면 구현 코드를 참조하십시오.
1. 라인 당 고정 번호 : 레이아웃의 미학 확인
.list li {너비 : 20%; 디스플레이 : 인라인-블록;*디스플레이 : 인라인;*줌 : 1; 오버플로 : 숨겨진;}2. 페이지 너비에 따라 숫자와 크기 조정 : 그림과 텍스트의 가독성을 확인하십시오.
.list li {너비 : 20%; 디스플레이 : 인라인-블록;*디스플레이 : 인라인;*줌 : 1; 오버플로 : 숨겨진;}1. 미디어 쿼리 제어 너비
@Media 화면 및 (max-width : 1280px) {. List-Table1 li {width : 25%}}@media screen and (max-width : 600px) {. list-table1 li {width : 33.3%}}@media screen and (max-width : 400px) {. list-table 1 li}}편리하지만 호환됩니다
2. JS 제어
$ (wind li "). li ").
참고 :
1. 그림이 변형되지 않습니다
.a-common {너비 : 자동; 높이 : 자동;}. a-common img {너비 : 100%; 높이 : auto;}2. 텍스트 오버플로 처리
.Title, .subtitle {너비 : 자동; 텍스트-정렬 : 중심; 오버플로 : 숨겨진; 흰색 공간 : nowrap; 텍스트-오버 플로우 : 엘리석시스;}위는 편집기가 소개 한 JS 구현 목록의 반응 형 레이아웃입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!