CSS 적응형 레이아웃에 대한 자세한 설명

이번에는 CSS 적응형 레이아웃에 대한 자세한 설명을 가져왔습니다. CSS 적응형 레이아웃의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

머리말

이 글에서는 페이지 레이아웃의 적응형 레이아웃을 소개합니다. 두 가지 일반적인 적응형 레이아웃이 있습니다. 왼쪽 열은 고정되고 오른쪽 열은 적응형이며 왼쪽 및 오른쪽 열은 고정되고 가운데는 고정됩니다. 적응.

1. 왼쪽 열은 고정되고 오른쪽 열은 적응형 레이아웃 구성표입니다

지침: 왼쪽 열은 고정되고 오른쪽 열은 적응적이며 오른쪽 열도 고정될 수 있으며 왼쪽 열은 적응적입니다. 미드엔드 관리 인터페이스, 모바일 웹 목록 등에서 흔히 볼 수 있습니다.

<p class="container">
    <p class="left">固定宽度</p>
    <p class="right">自适应</p>
</p>

1.1 하위 요소 float:left

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

1.2 하위 요소 너비:calc()

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

1.3 상위 요소 표시: table

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

1.4 상위 요소 표시: flex

브라우저 지원: 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;
}

2. 왼쪽 및 오른쪽 열은 고정되어 있으며 가운데는 가변적입니다.

<p class="container">
    <p class="left">左侧定宽</p>
    <p class="mid">中间自适应</p>
    <p class="right">右侧定宽</p>
</p>

2.1 하위 요소 너비:calc()

설명: 적응형 열의 너비 상위 컨테이너 너비 - 고정 열 너비와 같이 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;
}

2.2 상위 요소 표시: flex

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

프런트 엔드 HTML의 기본 지식 ,

모바일 터미널 캐러셀을 구현하는 vue 플러그인

Css 플로트 박스 모델 위치

위 내용은 CSS 적응형 레이아웃에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!