float 를 사용 하지 않 고 모듈 중앙 레이아웃 을 실현 합 니 다.

가장 흔히 볼 수 있 는 실 용적 인 레이아웃 형식:위,중,오른쪽,아래 네 개의 모듈,너비 760 px,전체 페이지 가 가운데 입 니 다.

구조 코드,top left right foot 네 모듈 은 모두 독립 되 고 서로 끼 워 넣 지 않 습 니 다.
＜div id="top"＞head＜/div＞
＜div id="left"＞  ＜div id="left_module"＞left＜/div＞＜/div＞
＜div id="right"＞  ＜div id="right_module"＞right＜/div＞＜/div＞
＜div id="foot" ＞foot＜/div＞
상단 은 일반적인 정의 에 속 합 니 다.
#top { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}
방법 A:바깥쪽 left 는 760 px 너비 와 가운데 로 정의 합 니 다.내부 레프 트module 는 실제 왼쪽 너비 280 px 로 정의 되 고 절대적 인 포 지 셔 닝 이 며 top 값 은 상단 정의 높이 와 같 습 니 다.이 방법의 장점 은 left right 두 모듈 코드 세 션 을 교환 하여 디 스 플레이 우선 순 위 를 조정 할 수 있다 는 것 이다.
#left { width:760px; margin:auto;}  #left_module { width:280px; position:absolute; top:100px; padding:10px;}
방법 B:외층 left 는 760 px 너비 와 가운데 로 정의 하고 상대 적 으로 top 에 떠 있 습 니 다.내부 레프 트module 는 실제 왼쪽 너비 280 px 로 정의 되 며 절대적 인 포 지 셔 닝 입 니 다.이런 방법의 장점 은 상부 의 높이 가 자 유 롭 게 연장 할 수 있다 는 것 이다.
#left { width:760px; margin:auto; position:relative;}  #left_module { width:280px; position:absolute; padding:10px;}
외층 right 는 760 px 너비 와 가운데,내층 right 로 정의 합 니 다.module 는 실제 오른쪽 너비 440 px 로 정의 하고 margin 문법 을 사용 하여 왼쪽 에 있 습 니 다.right_module 가 정의 하 는 배경 색 은 실제 오른쪽 배경 색 이 고 정의 하 는 높이 는 실제 중간 모듈 의 높이 입 니 다.right 의 배경 색 은 실제 왼쪽 의 배경 색 입 니 다.
#right { width:760px; margin:auto; background:#E8E8E8;}  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}
아래쪽 도 일반적인 정의 에 속 합 니 다.
#foot { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}
테스트 환경 IE 6.0 과 FF 1.5 는 모두 가장 일반적인 문법 으로 매우 간단 하고 실 용적 이 며 유한 하여 기술 참고 가 될 수 있 습 니 다.