일반적인 3개 행과 2개 열 중심 높이 적응형 레이아웃_CSS/HTML

전체 페이지 콘텐츠를 중앙에 배치하는 방법과 콘텐츠에 맞게 높이를 자동으로 조정하는 방법입니다. 이것은 CSS 레이아웃을 배울 때 가장 일반적인 문제입니다. 아래에 실제 예를 제시하고 자세히 설명합니다. (본 글에 실린 경험과 경험은 블루이상 포럼에서 xpoint와 guoshuang이 논의한 결과입니다.)

우선실제 실행 효과를 보려면 여기를 클릭하세요 이 페이지는 Mozilla, Opera 및 IE 브라우저에서 중앙에 배치될 수 있으며 적응력이 뛰어납니다. 코드를 분석해 보겠습니다.

전체 코드

header

class="text">오른쪽

1

1

1

1

1

left

footer

코드 분석

먼저 본문과 상단 #header의 첫 번째 줄을 정의합니다. 여기서 핵심은 본문의

text-align:center;와 margin-right: auto;margin입니다. - 헤더 왼쪽: auto;, 이 두 문장이 헤더를 중앙에 배치합니다. 참고: 실제로 text-align:center;를 정의하면 IE에서는 이미 중앙 정렬이 이루어지지만 Mozilla에서는 중앙 정렬을 수행하려면 margin:auto를 설정해야 합니다.

다음으로 두 개의 중간 열 #right와 #left를 정의합니다. 두 개의 중간 열을 중앙에 배치하기 위해 #contain 레이어를 그 외부에 중첩하고 margin:auto;를 포함하도록 설정하여 #right와 #left가 자연스럽게 중앙에 위치하도록 합니다.

가운데 두 열의 정의 순서에 주의하세요. 먼저 #right를 정의하고

float: right;를 통해 #contain 레이어의 가장 오른쪽에 부동하게 만듭니다. 그런 다음 #left를 정의하고 float: left;를 통해 #right 레이어의 왼쪽에 부동하게 만듭니다. 이는 테이블을 왼쪽에서 오른쪽으로 정의한 순서와 정반대입니다(수정: 왼쪽 먼저 오른쪽, 또는 오른쪽 다음 왼쪽, 필요에 따라 디자인할 수 있음).

#contain과 코드의 두 열 사이에 #mainbg 레이어가 중첩되어 있는 것을 볼 수 있습니다. 이 레이어는 무엇을 위해 사용됩니까? 이 레이어는 #contain의 배경을 정의하는 데 사용됩니다. #contain에서 배경을 직접 정의하고 다른 레이어를 추가하는 것은 어떨까요? 왜냐하면 #contain에 직접 정의한 배경은 모질라에서는 표시되지 않고 높이 값을 정의해야 하기 때문이다. 높이 값을 정의하면 #right 레이어가 콘텐츠에 따라 자동으로 크기가 조정될 수 없습니다. 배경 및 높이 문제를 해결하려면 이러한 #mainbg 레이어를 추가해야 합니다. 비결은 #mainbh 레이어

float: left;를 정의하는 것입니다. 왜냐하면 float는 레이어 너비와 높이 속성을 자동으로 제공하기 때문입니다. (당분간은 이렇게 이해해두자 :)

마지막으로 하단에 #footer 레이어를 정의합니다. 이 정의의 핵심은

clear:both;입니다. 이 문장의 기능은 #footer 레이어의 부동 상속을 취소하는 것입니다. 그렇지 않으면 #right 아래가 아닌 #header 옆에 #footer가 표시됩니다.

메인 레이어가 정의되면 레이아웃이 준비됩니다. 추가 사항: 제가

.text{margin:0px;padding:20px;}도 정의했다는 것을 보셨을 겁니다. 이 클래스의 기능은 콘텐츠 주위에 20px 여백을 만드는 것입니다. #right에서 여백이나 패딩을 직접 정의하지 않는 이유는 무엇입니까? Mozilla와 IE는 CSS 상자 모델에 대해 일관되지 않은 해석을 가지고 있기 때문에 여백/패딩을 직접 정의하면 Mozilla에서 레이아웃 변형이 발생합니다. 저는 보통 그 안에 다른 레이어를 넣어서 문제를 해결합니다.