float_CSS/HTML 없이 모듈 센터 레이아웃 구현

float_CSS/HTML 없이 중앙 모듈 레이아웃 달성

가장 일반적이고 실용적인 레이아웃 형식: 상단, 중앙 왼쪽, 중앙 오른쪽 및 하단 4개 모듈, 너비 760px, 전체 페이지 중앙.

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

＜p id="top"＞head＜/p＞
＜p id="left"＞  ＜p id="left_module"＞left＜/p＞＜/p＞
＜p id="right"＞  ＜p id="right_module"＞right＜/p＞＜/p＞
＜p id="foot" ＞foot＜/p＞

상단 부분이 일반적인 정의에 속합니다.

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

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

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

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

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

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

#right { width:760px; margin:auto; background:#E8E8E8;}
  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

Bottom도 기존의 정의에 속합니다.

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

테스트 환경인 IE6.0과 FF1.5는 가장 저속한 구문을 가지고 있어 매우 단순하고 실용성이 제한되어 있습니다.

위는 float 없이 모듈센터layout_CSS/HTML을 구현한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. !