저작권 등의 정보를 넣기 위해 3열 레이아웃 끝에 바닥글 줄을 추가하고 싶은 경우. 3열의 하단을 정렬해야 하는 문제가 발생했습니다. 테이블 레이아웃에서는 큰 테이블을 작은 테이블에 중첩하는 방법을 사용합니다. 이렇게 하면 세 개의 열을 쉽게 정렬할 수 있지만 div 레이아웃에서는 세 개의 열이 독립적으로 흩어져 있고 내용의 높이가 다르기 때문에 정렬하기가 어렵습니다. 실제로 div를 완전히 중첩하고 세 개의 열을 하나의 DIV에 넣어 하단 정렬을 달성할 수 있습니다. 다음은 구현 예입니다(흰색 배경 상자가 페이지를 시뮬레이션함).
몸
이 예제 페이지의 주요 코드는 다음과 같습니다.
<div id="헤더"></div>
<div id="메인박스">
<div id="메뉴"></div>
<div id="사이드바"></div>
<div id="콘텐츠"></div>
</div>
<div id="바닥글"></div>
특정 스타일 시트는 해당 섹션에 기록되어 있습니다. 핵심은 #mainbox 레이어가 #menu, #sidebar 및 #content의 세 레이어에 중첩되어 있다는 것입니다. #content의 컨텐츠가 증가하면 #content의 높이가 증가하고 #mainbox의 높이도 확장되며 #footer 레이어가 자동으로 아래로 이동합니다. 이는 높은 수준의 적응성을 달성합니다.
또한 #menu 및 #content가 "FLOAT: right;" 페이지의 오른쪽에 떠 있고, #sidebar가 #menu 레이어 "FLOAT: left;"의 왼쪽에 떠 있다는 점도 주목할 가치가 있습니다. 부동 방법 위치 지정을 사용할 수도 있으며 절대 위치 지정을 사용하여 이 효과를 얻을 수도 있습니다.
이 방법의 또 다른 문제점은 사이드바의 배경이 #sidebar 100%가 될 수 없다는 점입니다. 일반적인 해결책은 본문의 배경색으로 채우는 것입니다. (#mainbox의 배경색은 Mozilla 등의 브라우저에서는 유효하지 않기 때문에 #mainbox의 배경색을 사용할 수 없습니다.)
자, 기본 프레임워크가 구축되었으며 남은 작업은 여기에 벽돌과 타일을 추가하는 것입니다. 다른 레이아웃을 시도하고 싶다면 다음 문서를 읽어 보시기 바랍니다.
CSS 레이아웃의 16가지 예
onestab: 3열 복합 레이아웃 데모
onestab: 자유롭게 늘릴 수 있는 3열 레이아웃
