전형 적 인 3 행 2 열 가운데 높이 적응 구조

어떻게 하면 전체 페이지 의 내용 을 가운데 로 하고,어떻게 하면 고도 로 내용 에 적응 하여 자동 으로 신축 할 수 있 습 니까?이것 은 CSS 레이아웃 을 배 우 는 데 가장 흔히 볼 수 있 는 문제 다.다음은 실제 적 인 예 를 제시 하고 상세 하 게 설명 한다.본 논문 의 경험 과 파란색 이상 포럼 xpoint,guoshuang 이 공동으로 토론 한 것 이다.)
먼저여기 로 실제 운행 효 과 를 보 세 요.이 페이지 는 mozilla,opera,IE 브 라 우 저 에서 모두 중간 과 고도 의 적응 을 실현 할 수 있 습 니 다.코드 분석:
전체 코드
코드 분석
먼저,우 리 는 body 와 상단 의 첫 줄 을 정의 합 니 다.이 안의 관건 은 body 의 text-align:center 입 니 다.헤더 의 margin-right:auto;margin-left: auto;，이 두 마디 를 통 해 header 를 가운데 로 합 니 다.주:사실 text-align:center 를 정의 합 니 다.IE 에서 가운데 에 있 지만 mozilla 에 서 는 유효 하지 않 습 니 다.margin:auto 를 설정 해 야 합 니 다.모 질 라 의 중간 을 이 룰 수 있 습 니 다.
다음은 중간 에 있 는 두 열 을 정의 합 니 다.중간 두 열 도 가운데 로 하기 위해 서,우 리 는 그것들 밖 에 층\#contain 을 끼 워 넣 고,contain 에 margin:auto 를 설정 합 니 다.이렇게 해서
중간 두 열 이 정의 하 는 순 서 를 주의 하 십시오.우 리 는 먼저\#right 를 정의 하고 float:right 를 통 해 정의 합 니 다.\#contain 층 의 맨 오른쪽 에 띄 워 주세요.그리고\#left 를 정의 합 니 다.float:left 를 통 해;#right 층 왼쪽 에 떠 있 게 합 니 다.이것 은 우리 가 이전에 표 에서 왼쪽 에서 오른쪽으로 정 의 했 던 순서 와 정반 대 이다.
우 리 는 코드 에\#contain 과 두 열 사이 에 한 층 이 새 겨 져 있 는 것 을 보 았 습 니 다.\#mainbg,이 층 은 무엇 에 쓰 입 니까?이 층 은\#contain 의 배경 을 정의 하 는 데 사 용 됩 니 다.왜\#contain 에서 배경 을 직접 정의 하지 않 고 한 층 더 만들어 야 하 는 지 물 어 볼 것 이다.그것 은\#contain 에서 직접 정 의 된 배경 으로 mozilla 에 표시 되 지 않 기 때문에 높이 를 정의 해 야 합 니 다.고도 값 을 정의 하면\#right 층 은 내용 에 따라 자동 으로 신축 할 수 없습니다.배경 과 고도 의 문 제 를 해결 하기 위해 서 는 이\#mainbg 층 을 추가 해 야 합 니 다.비결 은\#mainbh 이 층 정의 float:left;,float 는 층 을 자동 으로 넓 고 높 은 속성 을 가지 게 하기 때 문 입 니 다.(일단 이렇게 이해한다.)
마지막 으로 아래쪽 의\#footer 층 을 정의 합 니 다.이 정의 의 관건 은:clear:both;,이 말 은\#footer 층 의 변동 계승 을 취소 하 는 역할 을 합 니 다.그렇지 않 으 면\#footer 가\#header 에 붙 어 있 는 것 을 볼 수 있 습 니 다.\#right 아래 가 아 닙 니 다.
주요 층 의 정의 가 끝나 면 이 레이아웃 은 ok 입 니 다.보충 점:내 가'text{margin:0px'를 정의 한 것 을 보 았 습 니 다.padding:20px;}，이 클 라 스 의 역할 은 내용 의 외곽 을 20px 의 공백 으로 만 드 는 것 이다.왜\#right 에서 margin 이나 padding 을 직접 정의 하지 않 습 니까?mozilla 와 IE 가 css 박스 모델 에 대한 설명 이 일치 하지 않 기 때문에 margin/padding 을 직접 정의 하면 mozilla 의 레이아웃 이 변 형 될 수 있 습 니 다.나 는 보통 내부 에서 한 층 더 덧 붙 이 는 방법 으로 해결한다.