먼저, 실제 작업 효과를 보려면 여기를 클릭하세요. 이 페이지는 Mozilla, Opera 및 IE 브라우저에서 중앙에 배치될 수 있으며 적응력이 뛰어납니다. 코드를 분석해 보겠습니다.
완전한 코드
<html>
<머리>
<스타일 유형="텍스트/css">
몸{
배경:#999;
텍스트 정렬:가운데;
색상: #333;
글꼴 계열:arial,verdana,sans-serif;
}
#헤더{
너비:776px;
여백 오른쪽: 자동;
여백 왼쪽: 자동;
패딩: 0px;
배경: #EEE;
높이:60px;
텍스트 정렬:왼쪽;
} #포함하다{
여백 오른쪽: 자동;
여백 왼쪽: 자동;
너비: 776px;
} #메인백{
너비:776px;
패딩: 0px;
배경: #60A179;
플로트: 왼쪽;
}
#오른쪽{
플로트: 오른쪽;
여백: 2px 0px 2px 0px;
패딩:0px;
너비: 574px;
배경: #ccd2de;
텍스트 정렬:왼쪽;
}
#왼쪽{
플로트: 왼쪽;
여백: 2px 2px 0px 0px;
패딩: 0px;
배경: #F2F3F7;
너비: 200px;
텍스트 정렬:왼쪽;
}
#보행인{
지우기:둘 다;
너비:776px;
여백 오른쪽: 자동;
여백 왼쪽: 자동;
패딩: 0px;
배경: #EEE;
높이:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<본문>
<div id="header">헤더</div>
<div id="포함">
<div id="mainbg">
<div id="오른쪽">
<div
class="text">오른쪽<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div ID="왼쪽">
<div class="text">왼쪽</div>
</div>
</div>
</div>
<div id="footer">바닥글</div>
</body>
</html>
다음으로 두 개의 중간 열 #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에서 레이아웃 변형이 발생합니다. 저는 보통 그 안에 다른 레이어를 넣어서 문제를 해결합니다.