이번에는 CSS 적응형 레이아웃에 대한 자세한 설명을 가져왔습니다. CSS 적응형 레이아웃의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
이 글에서는 페이지 레이아웃의 적응형 레이아웃을 소개합니다. 두 가지 일반적인 적응형 레이아웃이 있습니다. 왼쪽 열은 고정되고 오른쪽 열은 적응형이며 왼쪽 및 오른쪽 열은 고정되고 가운데는 고정됩니다. 적응.
지침: 왼쪽 열은 고정되고 오른쪽 열은 적응적이며 오른쪽 열도 고정될 수 있으며 왼쪽 열은 적응적입니다. 미드엔드 관리 인터페이스, 모바일 웹 목록 등에서 흔히 볼 수 있습니다.
<p class="container"> <p class="left">固定宽度</p> <p class="right">自适应</p> </p>
Description: 왼쪽의 고정 열은 float:left로 설정되고 오른쪽의 적응형 열은 float:none으로 설정됩니다.
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: none; width: 100%; height: 100%; background-color: #9dc3e6; }
Description: 적응형 열의 너비는 calc()를 기반으로 자동으로 계산됩니다. 예: 상위 컨테이너 너비 - 고정 열 너비.
브라우저 지원: IE 9+.
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: left; width: calc(100% - 200px); height: 100%; background-color: #9dc3e6; }
Explanation: 상위 컨테이너가 display: table 및 table-layout: 고정을 사용하는 경우 하위 컨테이너는 상위 컨테이너의 너비를 균등하게 나눕니다. 이때 특정 열의 너비와 나머지 열은 나머지 너비를 균등하게 나누어 계속됩니다.
브라우저 지원: IE 8+.
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; display: table; width: 100%; height: 100%; table-layout: fixed; } .left { display: table-cell; width: 200px; height: 100%; background-color: #72e4a0; } .right { display: table-cell; width: 100%; height: 100%; background-color: #9dc3e6; }
브라우저 지원: IE 10+.
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; display: flex; width: 100%; height: 100%; } .left { width: 200px; height: 100%; background-color: #72e4a0; } .right { flex: 1; height: 100%; background-color: #9dc3e6; }
<p class="container"> <p class="left">左侧定宽</p> <p class="mid">中间自适应</p> <p class="right">右侧定宽</p> </p>
설명: 적응형 열의 너비 상위 컨테이너 너비 - 고정 열 너비와 같이 calc() 에 따라 자동으로 계산됩니다.
브라우저 지원: IE 9+.
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 100px; height: 100%; background-color: #72e4a0; } .mid { float: left; width: calc(100% - 100px - 100px); height: 100%; background-color: #9dc3e6; } .right { float: left; width: 100px; height: 100%; background-color: #4eb3b9; }
Description: 상위 요소가 표시를 flex로 설정하면 한 열의 flex는 1이 되고 나머지 열은 고정 너비로 설정됩니다.
브라우저 지원: IE 10+.
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; display: flex; width: 100%; height: 100%; } .left { float: left; width: 100px; height: 100%; background-color: #72e4a0; } .mid { float: left; height: 100%; flex: 1; background-color: #9dc3e6; } .right { float: left; width: 100px; height: 100%; background-color: #4eb3b9; }
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
위 내용은 CSS 적응형 레이아웃에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!