CSS floats_Experience exchange를 사용하여 3열 페이지 레이아웃 만들기

3열 레이아웃은 현재 가장 일반적인 웹 페이지 레이아웃입니다. 메인 페이지 콘텐츠는 가운데 열에 배치되고 측면의 두 열에는 탐색 링크 및 기타 콘텐츠가 배치됩니다. 기본 레이아웃은 일반적으로 제목 아래에 3개의 열을 배치하고, 3개의 열은 전체 페이지 너비를 차지합니다. 마지막으로 바닥글은 페이지 하단에 배치되며 바닥글도 전체 페이지 너비를 차지합니다.

대부분의 웹 디자이너는 테이블이 있는 레이아웃을 생성하거나, 고정 너비 레이아웃 또는 "액체"(사용자 브라우저의 너비에 따라 자동으로 크기가 조정되고 축소되는) 레이아웃을 생성하는 데 사용할 수 있는 전통적인 웹 디자인 기술에 익숙합니다. 창) 웹 페이지.

이제 우리 모두는 테이블 기반 레이아웃 기술에서 벗어나고 있으므로 많은 웹 디자이너는 3열 레이아웃을 만드는 방법으로 XHTML 마크업 및 CSS 형식의 새로운 패러다임을 찾고 있습니다. 절대 위치 지정을 사용하여 CSS에서 고정 너비 레이아웃을 얻는 것은 어렵지 않지만 유동적 레이아웃을 얻는 것은 좀 더 어렵습니다. 따라서 이 기사에서는 CSS float 및clear 속성을 사용하여 3열 유동 레이아웃을 얻는 방법을 소개합니다.

기본 방법
기본 레이아웃에는 제목, 바닥글, 3개의 열 등 5개의 div가 포함됩니다. 머리글과 바닥글은 페이지의 전체 너비를 차지합니다. 왼쪽 열 div와 오른쪽 열 div는 모두 고정 너비이며 float 속성을 사용하여 브라우저 창의 왼쪽과 오른쪽에 고정합니다. 중앙 열은 실제로 전체 페이지 너비를 차지하고 중앙 열의 콘텐츠는 왼쪽 열과 오른쪽 열 사이를 "흐릅니다". 가운데 열 div의 너비는 고정되어 있지 않기 때문에 브라우저 창의 변경 사항에 따라 필요에 따라 확장 및 축소가 가능합니다. 중앙 열 div의 왼쪽 및 오른쪽에 있는 패딩 속성은 콘텐츠가 사이드바 하단(왼쪽 또는 오른쪽 열)까지 늘어나더라도 깔끔한 열에 정렬되도록 보장합니다.

3열 레이아웃의 예
이 글에서 소개한 기술을 활용한 3열 레이아웃의 예를 살펴보세요. 이 예에서는 밝은 색상을 사용하여 레이아웃의 다양한 div를 구분합니다.

다음은 XHTML 코드입니다:

헤더

좌현측 텍스트...

우현측 텍스트...

중간 열 텍스트.. .

바닥글 텍스트...

다음은 CSS 코드입니다.

body {
여백: 0px;
패딩:
}
div#header {
클리어:
높이:
배경색: aqua;
패딩:
}
div#left {
너비: 150px
배경색: 빨간색; div#right {
float: 오른쪽;
너비: 150px;
배경색: 녹색
}
div#middle {
패딩: 0px 160px 5px 160px; > 여백: 0 px
배경색: 은색
}
div#footer {
지우기: 둘 다
배경색: 노란색; 🎜>