좌우 두 칸의 고정 너비, 중간에 배치에 적응하는 5가지 방안

한 가지 자주 사용하는 레이아웃 문제는 좌우 두 칸의 고정 너비, 중간 내용이 스스로 적응하는 것이다. 이어서 5가지 자주 사용하는 해결 방안을 소개한다.

1. 플로트 부동

플로트를 통해 좌우 2란을 왼쪽과 오른쪽으로 띄우고 중간div는 좌우 2개div 뒤에 놓아야 한다.

의 장점: 브라우저 호환성이 비교적 좋다

단점: 부동은 관련 요소가 문서 흐름에서 벗어날 수 있으므로 부동을 제거하는 처리를 해야 한다.또한 중간 구역의 내용 높이가 설정 높이를 초과할 때 세 개의 난간 구조를 파괴할 수 있다.

2. 절대 포지셔닝

왼쪽 중오른쪽 세 개의div는 모두 절대적인 위치를 설정해야 한다. position: absolute, 왼쪽 div설정left: 0은 왼쪽, 오른쪽 div동리설정right: 0은 오른쪽, 중간 div는left와right값을 왼쪽과 오른쪽 div의 너비로 설정한다.

의 장점: 빠르고 편리함

단점: 하위 요소도 함께 문서 흐름에서 벗어나 사용성이 떨어진다.또한 중간 구역의 내용 높이가 설정 높이를 초과할 때 세 개의 난간 구조를 파괴할 수 있다.

3. flex 레이아웃

우선 왼쪽 중 오른쪽 세 개의div를 감싸는 부용기 노드의 레이아웃은 flex 레이아웃 즉display: flex이고 좌우div는 고정폭을 설정하며 중간div설정flex: 1은 남은 공간을 차지한다.

장점: 비교적 완벽한 방법으로 이동단이 비교적 흔하다.세 개의 난간 높이를 정하지 않을 때, 지역 내용의 높이에 따라 변경할 수 있다.

단점: 호환성이 좋지 않아 IE11 이하에서는 지원되지 않습니다.또한 Flex 레이아웃으로 설정하면 하위 요소의 float,clear,vertical-align 속성이 효력을 상실합니다.

4. 표 레이아웃 테이블

우선 왼쪽 중 오른쪽 세 개의div를 감싸는 부용기 노드의 레이아웃을 테이블 레이아웃display: table으로 설정하고 전체 너비는 100%로 설정하며 왼쪽 중 오른쪽은 테이블-cell로 설정하고 좌우div는 고정 너비를 설정하며 중간div는 너비를 설정하지 않습니다.

장점: 비교적 완벽한 방법.세 개의 난간 높이를 정하지 않을 때, 지역 내용의 높이에 따라 변경할 수 있다.

단점: 호환성이 좋지 않고 IE11 이하는 지원되지 않으며 세 칸의 높이는 시종일관 일치하며 한 칸의 높이를 증가하거나 줄이기만 하면 안 된다

5. 격자grid 레이아웃

우선 왼쪽 중 오른쪽 세 개의div를 감싸는 부용기 노드의 레이아웃은grid레이아웃display: grid이고 전체 너비는 100%이다. 그물은 줄과 열을 설정해야 한다. 줄 높이는 200px, 즉grid-template-rows: 200px;를 설정해야 한다. 동시에 3열이 있고 좌우 각 200px의 너비는 중간에 적응해야 한다grid-template-columns: 200px auto 200px;.

장점: 비교적 새로운 방법

단점: 호환성이 좋지 않으며 IE11 이하는 지원되지 않습니다.또한 중간 구역의 내용 높이가 설정 높이를 초과할 때 세 개의 난간 구조를 파괴할 수 있다.