3열 레이아웃은 현재 가장 일반적인 웹 페이지 레이아웃입니다. 메인 페이지 콘텐츠는 가운데 열에 배치되고 측면의 두 열에는 탐색 링크 및 기타 콘텐츠가 배치됩니다. 기본 레이아웃은 일반적으로 제목 아래에 3개의 열을 배치하고, 3개의 열은 전체 페이지 너비를 차지합니다. 마지막으로 바닥글은 페이지 하단에 배치되며 바닥글도 전체 페이지 너비를 차지합니다.
대부분의 웹 디자이너는 테이블이 있는 레이아웃을 생성하거나, 고정 너비 레이아웃 또는 "액체"(사용자 브라우저의 너비에 따라 자동으로 크기가 조정되고 축소되는) 레이아웃을 생성하는 데 사용할 수 있는 전통적인 웹 디자인 기술에 익숙합니다. 창) 웹 페이지.
이제 우리 모두는 테이블 기반 레이아웃 기술에서 벗어나고 있으므로 많은 웹 디자이너는 3열 레이아웃을 만드는 방법으로 XHTML 마크업 및 CSS 형식의 새로운 패러다임을 찾고 있습니다. 절대 위치 지정을 사용하여 CSS에서 고정 너비 레이아웃을 얻는 것은 어렵지 않지만 유동적 레이아웃을 얻는 것은 좀 더 어렵습니다. 따라서 이 기사에서는 CSS float 및clear 속성을 사용하여 3열 유동 레이아웃을 얻는 방법을 소개합니다.
기본 방법
기본 레이아웃에는 제목, 바닥글, 3개의 열 등 5개의 div가 포함됩니다. 머리글과 바닥글은 페이지의 전체 너비를 차지합니다. 왼쪽 열 div와 오른쪽 열 div는 모두 고정 너비이며 float 속성을 사용하여 브라우저 창의 왼쪽과 오른쪽에 고정합니다. 중앙 열은 실제로 전체 페이지 너비를 차지하고 중앙 열의 콘텐츠는 왼쪽 열과 오른쪽 열 사이를 "흐릅니다". 가운데 열 div의 너비는 고정되어 있지 않기 때문에 브라우저 창의 변경 사항에 따라 필요에 따라 확장 및 축소가 가능합니다. 중앙 열 div의 왼쪽 및 오른쪽에 있는 패딩 속성은 콘텐츠가 사이드바 하단(왼쪽 또는 오른쪽 열)까지 늘어나더라도 깔끔한 열에 정렬되도록 보장합니다.
3열 레이아웃의 예
이 글에서 소개한 기술을 활용한 3열 레이아웃의 예를 살펴보세요. 이 예에서는 밝은 색상을 사용하여 레이아웃의 다양한 div를 구분합니다.
다음은 XHTML 코드입니다:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
