float_Experience 교환 없이 div 모듈의 중앙 레이아웃 구현

가장 일반적인 div+css 웹 페이지 레이아웃 형식: 상단, 중앙 왼쪽, 중앙 오른쪽, 하단 4개 모듈, 너비는 760px이고 전체 페이지는 중앙에 배치됩니다.

구조 코드, 왼쪽 위 오른쪽 발 4개 모듈은 모두 독립적이며 서로 중첩되지 않습니다.

head

left

right

foot/div>

상단이 일반적인 정의입니다.

#top { height:100px; width:760px; margin:auto; text-align:center;}

방법 A: 외부 왼쪽은 760px로 정의됩니다. Centered; 내부 left_module은 실제 왼쪽 너비 280px로 정의되며 절대 위치에 있으며 상단 값은 상단에 정의된 높이와 같습니다.
이 방법의 장점은 왼쪽과 오른쪽의 두 모듈 코드 조각을 교환하여 표시 우선순위를 조정할 수 있다는 것입니다.

#left { width:760px; margin:auto;}
#left_module { width:280px; position: top:100px;}

방법 B: 외부 왼쪽은 760px 너비로 중앙에 위치하며 상단을 기준으로 부동합니다. 내부 left_module은 280px의 실제 왼쪽 너비로 정의되며 절대 위치에 있습니다.
이 방법의 장점은 상단 높이를 자유롭게 늘릴 수 있다는 것입니다.

#left { width:760px; margin:auto; position:relative;}
#left_module { width:280px; position:absolute;10px;}

바깥쪽 오른쪽 760px 너비 및 중앙 정렬로 정의되며 내부 right_module은 여백 구문을 사용하여 왼쪽에 배치하는 실제 오른쪽 너비 440px로 정의됩니다. right_module에 정의된 배경색은 실제 오른쪽 배경색이고, 정의된 높이는 중간 모듈의 실제 높이입니다. 오른쪽 배경색은 실제 왼쪽 배경색입니다.

#right { 너비:760px; 배경:#E8E8E8;}
#right_module { 너비:440px; 높이:360px; :10px;}

하단도 일반 정의에 속합니다.

#foot { height:100px; width:760px; margin:auto; text-align:center;}

테스트 환경 IE6.0 및 FF1.5 가장 저속한 구문으로, 매우 간단하고 실용성이 제한되어 있습니다.