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

php中世界最好的语言
풀어 주다: 2018-03-19 13:55:29
원래의
2275명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!