성배 레이아웃은 아름다운 효과를 가지며 브라우저 호환성 요구 사항이 매우 낮습니다. 이는 매우 강력한 3열 페이지 레이아웃 솔루션입니다. 다음으로 CSS 3열 "성배 레이아웃"에 대한 전체 분석을 살펴보겠습니다. " 해결 방법:
성배 레이아웃은 Matthew Levine이 2006년에 쓴 기사에서 유래되었습니다. DOM 구조는 다음과 같습니다.
<p class="container"> <p class="main"></p> <p class="sub"></p> <p class="extra"></p> </p>
프로세스 설명
계속 다음으로 성배 레이아웃을 단계별로 구현해 보겠습니다.
1 먼저 기본 열, 하위 열, 추가 열을 각각 띄운 다음 음수 여백을 사용하여 하위 열과 왼쪽과 오른쪽에 추가 열이 있습니다. 이때 CSS 코드는 다음과 같습니다.
.main { float: left; width: 100%; height: 300px; background-color: rgba(255, 0, 0, .5); } .sub { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); } .extra { float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); }
2. 이전 단계를 완료한 후 sub 및 extra 열이 올바른 위치에 도달했지만 sub 및 extra 열이 모두 덮습니다. 성배 레이아웃의 경우 이 문제에 대한 해결책은 메인 열이 올바른 위치에 배치되도록 컨테이너에 왼쪽 및 오른쪽 패딩을 추가하는 것입니다.
.container { padding-left: 210px; padding-right: 190px; }
3. 두 번째 단계를 완료한 후 새로운 문제가 나타났습니다. 하위 열과 추가 열도 컨테이너의 왼쪽 및 오른쪽 내부 여백에 영향을 받아 위치가 이동했습니다. 이 문제를 해결하기 위해 성배 레이아웃은 상대 위치 지정을 사용하여 하위 열과 추가 열을 올바른 위치로 되돌립니다. 새로 추가된 코드는 다음과 같습니다:
.sub { position: relative; left: -210px; } .extra { position: relative; rightright: -190px; }
4. 브라우저가 어느 정도 줄어들면 이 레이아웃이 깨질 수 있습니다. 이는 min-width 속성을 추가하면 해결됩니다. 몸에. 최종 성배 레이아웃 CSS 코드는 다음과 같습니다.
body { min-width: 600px; /* 2*sub + extra */ } .container { padding-left: 210px; padding-right: 190px; } .main { float: left; width: 100%; height: 300px; background-color: rgba(255, 0, 0, .5); } .sub { position: relative; left: -210px; float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); } .extra { position: relative; rightright: -190px; float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); }
전체 예시
효과는 다음과 같습니다.
CSS와 DOM 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>圣杯布局</title> <style type="text/css"> body {background-color: #ffffff; font-size:14px;} #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;} .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;} .main {background-color: #03a9f4; color:#ffffff;} .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;} p {margin:0; padding:20px; text-align: center;} /* 左侧栏固定宽度,右侧自适应 */ .bd-lft { zoom:1; overflow:hidden; padding-left:210px; } .bd-lft .aside { float:left; width:200px; margin-left:-100%; /*= -100%*/ position:relative; left:-210px; /* = -parantNode.paddingLeft */ _left: 0; /*IE6 hack*/ } .bd-lft .main { float:left; width:100%; } /* 右侧栏固定宽度,左侧自适应 */ .bd-rgt { zoom:1; overflow:hidden; padding-right:210px; } .bd-rgt .aside { float:left; width:200px; margin-left:-200px; /* = -this.width */ position:relative; rightright:-210px; /* = -parantNode.paddingRight */ } .bd-rgt .main { float:left; width:100%; } /* 左中右 三栏自适应 */ .bd-3-lr { zoom:1; overflow:hidden; padding-left:210px; padding-right:210px; } .bd-3-lr .main { float:left; width:100%; } .bd-3-lr .aside-1 { float: left; width:200px; margin-left: -100%; position:relative; left: -210px; _left: 210px; /*IE6 hack*/ } .bd-3-lr .aside-2 { float: left; width:200px; margin-left: -200px; position:relative; rightright: -210px; } /* 都在左边,右侧自适应 */ .bd-3-ll { zoom:1; overflow:hidden; padding-left:420px; } .bd-3-ll .main { float:left; width:100%; } .bd-3-ll .aside-1 { float: left; width:200px; margin-left: -100%; position:relative; left: -420px; _left: 0px; /*IE6 hack*/ } .bd-3-ll .aside-2 { float: left; width:200px; margin-left: -100%; position:relative; left: -210px; _left: 210px; /*IE6 hack*/ } /* 都在右边,左侧自适应 */ .bd-3-rr { zoom:1; overflow:hidden; padding-right:420px; } .bd-3-rr .main { float:left; width:100%; } .bd-3-rr .aside-1 { float: left; width:200px; margin-left: -200px; position:relative; rightright: -210px; } .bd-3-rr .aside-2 { float: left; width:200px; margin-left: -200px; position:relative; rightright: -420px; } </style> </head> <body> <p id="hd">头部</p> <p class="bd-lft"> <p class="main"> <p>主内容栏自适应宽度</p> </p> <p class="aside"> <p>侧边栏固定宽度</p> </p> </p> <p class="bd-rgt"> <p class="main"> <p>主内容栏自适应宽度</p> </p> <p class="aside"> <p>侧边栏固定宽度</p> </p> </p> <p class="bd-3-lr"> <p class="main"> <p>主内容栏自适应宽度</p> </p> <p class="aside-1"> <p>侧边栏1固定宽度</p> </p> <p class="aside-2"> <p>侧边栏2固定宽度</p> </p> </p> <p class="bd-3-ll"> <p class="main"> <p>主内容栏自适应宽度</p> </p> <p class="aside-1"> <p>侧边栏1固定宽度</p> </p> <p class="aside-2"> <p>侧边栏2固定宽度</p> </p> </p> <p class="bd-3-rr"> <p class="main"> <p>主内容栏自适应宽度</p> </p> <p class="aside-1"> <p>侧边栏1固定宽度</p> </p> <p class="aside-2"> <p>侧边栏2固定宽度</p> </p> </p> <p id="ft">底部</p> </body> </html>
성배 레이아웃의 장점을 요약하면 다음과 같습니다.
1. 기본 콘텐츠 열을 먼저 로드합니다.
2. 모든 열이 가장 높도록 허용합니다.
3. 추가 페이지 없음.
4. 해킹이 거의 필요하지 않습니다.
위 내용은 CSS의 3열 성배 레이아웃 체계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!