이전 튜토리얼 "구궁 기본 배치"에서는 상대 위치 지정과 절대 위치 지정을 사용하여 구궁 기본 배치를 만드는 방법을 소개했습니다. 이는 사람들의 관성적 사고에 더 부합하는 방법입니다. 제작 과정의 모든 것이 당연한 문제인 것 같습니다. 그러나 IE6의 역겨운 패리티 BUG로 인해 이 레이아웃에는 약간 적합하지 않게 되었습니다. 국내 사용자 대부분은 여전히 IE6를 사용하고 있고 이로 인해 이들 사용자를 잃을 수는 없기 때문이다.
현재 이 BUG에 대한 치료법은 없으며, 이를 사용할 수 있는 유일한 방법은 이를 우회하는 것입니다. 즉, 9각형 그리드의 네 모서리 컨테이너를 찾고 싶습니다. 절대 위치 지정 방법을 사용할 수 없습니다. 이는 이전 기사에서 사용한 방법을 완전히 뒤집게 됩니다. 다시 한번.
그렇다면 이 BUG를 심각한 상황에서 구할 수 있는 다른 기술은 무엇일까요? 왼쪽 및 오른쪽 부동 방법을 사용하면 요소 개체를 정확하게 오프셋할 수 있으며 이 방법을 사용하면 IE6의 패리티 BUG도 피할 수 있습니다. 좋아, 사용해 보자.
레이아웃의 요점과 어려움
우리는 여전히 테이블의 구조에 따라 새 모델의 구조를 구축하지만 이번에는 이전 기사의 구조와 다를 것입니다. 이 모델에서 우리가 주목해야 할 핵심 사항과 어려움은 다음 두 가지 사항입니다.
1. 두 개의 중간 컨테이너 t_m 및 b_m의 너비 값은 백분율 값이어야 합니다. 그렇지 않으면 전체 9제곱 그리드의 왼쪽 및 오른쪽 동적 확장을 보장할 수 없으며 고정된 픽셀 값이 아니어야 합니다. 너비는 총 컨테이너 너비에서 두 모퉁이 컨테이너 너비의 합을 뺀 값(%)과 같습니다. 계산 공식은 다음과 같습니다.
t_m(또는 b_m)의 너비 = (총 컨테이너 너비 - (왼쪽 위 모서리 컨테이너 너비 + 오른쪽 위 모서리 컨테이너 너비)) / 총 컨테이너 너비
즉, t_m 또는 b_m의 너비는 100%가 아닙니다. 그러나 두 컨테이너 t_l 및 t_r의 너비는 일반적으로 실제 경우 그림의 너비이므로 일반적으로 고정된 너비 값이므로 같은 3개 컨테이너에서 왼쪽과 오른쪽의 너비는 고정된 값이지만 가운데는 백분율이 필요하며 이 3개 컨테이너의 너비를 합하면 100%가 되어야 합니다.
여기서는 중간 컨테이너가 이상적인 너비 비율에 도달하도록 비교적 안전한 방법을 사용합니다.
DIV 컨테이너를 사용하여 패딩을 0 10px로 설정할 수 있습니다. 기본적으로 너비는 100%입니다. 왼쪽과 오른쪽 패딩 값이 설정되어 있으므로 내부 너비는 우리가 원하는 t_m의 이상적인 너비 값이므로 그 안에 컨테이너를 정의하고 이 하위 컨테이너의 너비는 100%로 설정합니다. 이 하위 컨테이너의 배경색은 왼쪽과 오른쪽의 가로 타일 배경 이미지로 설정할 수 있습니다. 이 하위 컨테이너는 우리가 사용할 최상위 컨테이너입니다. 너비 값에 대한 특별한 요구 사항을 충족합니다.
따라서 t_m의 구조는 다음과 같은 구조로 만들 수 있습니다.
<div class="top"><span class="t_m"></span></div>
그러나 이 정의는 또 다른 문제를 야기합니다. 이 문제는 IE7 이하의 브라우저에서 발생합니다. 패딩을 정의하기 때문에 아래의 중간 본문 레이어에도 왼쪽 및 오른쪽 내부 패치가 생성됩니다. 예: 왜 영향을 미치는지 알 수 없습니다. IE7?
따라서 해결책은 IE6 및 IE7에 대해 HACK 트릭을 사용하는 것입니다.
.b_l{마진-왼쪽:0px;+마진-왼쪽:-10px;_margin-왼쪽:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}
이 문장은 세 가지 브라우저에 대해 서로 다른 오프셋 값을 설정하고, 지정된 위치에 대해 왼쪽과 오른쪽으로 b_l과 b_r을 오프셋합니다.
2. 두 컨테이너 b_l, b_r의 높이 값이 동일해야 배경색을 세로 방향으로 타일링할 수 있습니다. 이렇게 하면 중앙 메인 컨텐츠 영역(컨텍스트)의 컨텐츠 높이가 변경되더라도 양쪽의 배경색은 항상 메인 컨텐츠 영역(컨텍스트)과 동일한 높이를 유지할 수 있습니다. 즉, 콘텐츠 본체의 높이에 따라 높이를 자유롭게 늘릴 수 있습니다.
이 문제를 해결하기 위해 일상적인 작업에서 자주 사용되는 동일한 높이의 여러 기둥을 사용하는 방법을 사용할 수 있습니다. 이 방법은 내부 패치와 음수 외부 패치의 조합을 사용하여 여러 열에 대해 동일한 높이를 달성합니다.
.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}
m_l과 m_r의 하단 내부 패치의 padding-bottom 값을 비교적 큰 값으로 설정했습니다. 예를 들어 30000px로 설정했습니다(원하는 값으로 설정하시면 됩니다). 이 높이 값을 초과하지 마십시오. 그런 다음 아래쪽 외부 패치(margin-bottom)를 아래쪽 내부 패치(padding-bottom) 값과 동일한 음수 값으로 설정하고 원래 위치로 다시 끌어온 다음 전체 컨테이너(상자)를 Overflow:hidden;으로 설정합니다. 두 기둥의 높이가 동일하도록 초과 높이를 잘라냅니다.
위의 두 가지 어려운 문제를 해결하고 나면 나머지는 간단하고 즐겁습니다! [컷 페이지]
구조층
이제 이전 사례를 기반으로 구조 레이어를 조정했으므로 다음과 같은 구조가 됩니다.
인용된 내용은 다음과 같습니다. <div 클래스="상자">
<!--첫 번째 줄—맨 위*/-->
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span> <!--두 번째 줄—중간 콘텐츠 영역*/-->
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">콘텐츠 본문 영역</div> <!--세 번째 줄—하단*/-->
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div> |
스타일 레이어
주요 스타일 설정은 다음과 같습니다.
인용된 내용은 다음과 같습니다. /*전체 컨테이너*/ .box{overflow:hidden;width:50%;margin:50px 자동 0;배경:#fff;}
.box 범위{디스플레이:블록;} /*상위 스타일*/
.top{높이:10px;패딩:0 10px;}
.t_l,.t_r{너비:10px;높이:10px;글꼴 크기:0%;여백-상단:-10px;}
.t_l{float:left;ground:#ff0000;}/*왼쪽 상단 모서리*/
.t_r{float:right; background:#ff0000;}/*오른쪽 상단*/
.t_m{height:10px;font-size:0%;width:100%; background:#7F0000;}/*좌우로 늘릴 수 있는 영역입니다. 두 경우 모두 공백으로 배치합니다. 왼쪽 및 오른쪽 모서리 컨테이너*/ /*중급 스타일*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*같은 높이의 두 열*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;배경:#7F0000;} /*왼쪽 테두리*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px; background:#7F0000;} /*오른쪽 테두리*/ /*하단 스타일*/
.b_m{padding:0 10px;height:10px;}/*왼쪽과 오른쪽으로 늘릴 수 있는 영역입니다. 두 경우 모두 왼쪽과 오른쪽 열에 같은 높이의 컨테이너를 배치할 수 있도록 공백을 남겨둡니다*/
.b_m 범위{너비:100%;높이:10px;글꼴 크기:0%;배경:#7F0000;}
.b_l,.b_r{높이:10px;글꼴 크기:0%;너비:10px;여백-상단:-10px;}
.b_l{float:left; background:#ff0000;}/*왼쪽 하단 모서리*/
.b_r{float:right; background:#ff0000;}/*오른쪽 하단 모서리*/ |
위의 설정을 마치면 9개의 정사각형 그리드가 완성됩니다. 이는 "깨지지 않으며" 콘텐츠 본문의 너비와 높이에 따라 모든 방향으로 자유롭게 늘어납니다. 이 모델에서는 시연을 위해 전체 컨테이너의 너비를 50%로 설정했습니다. 실제 필요에 따라 크기를 조정할 수 있으며 내부는 너비 값에 따라 전체 영역을 자동으로 채웁니다. . 상위 컨테이너를 버스트합니다. 아래와 같이:
8개의 그림을 사용하여 아름다운 9개의 정사각형 격자 상자를 만들 수 있습니다. 얼마나 완벽한지 보세요.
이 모델은 다음 브라우저에서 테스트되었습니다.
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
인용된 내용은 다음과 같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>깨지지 않는 9각형 그리드 레이아웃(http://www.cnblogs.com/binyong)</title>
<스타일 유형="텍스트/css">
/*
레이아웃 이름: 깨지지 않는 Nine Palace Grid
작가: 빙지펑
블로그 주소: http://www.cnblogs.com/binyong
*/
*{margin:0;padding:0;font-size:12px;}
body{text-align:center;color:#fff;}/*ie5.5는 여백의 가운데 정렬을 지원하지 않습니다*/
/*전체 컨테이너*/
.box{overflow:hidden;width:50%;margin:50px 자동 0;배경:#fff;}
.box 범위{디스플레이:블록;}
/*상위 스타일*/
.top{높이:10px;패딩:0 10px;}
.t_l,.t_r{너비:10px;높이:10px;글꼴 크기:0%;여백-상단:-10px;}
.t_l{float:left;ground:#ff0000;}/*왼쪽 상단 모서리*/
.t_r{float:right; background:#ff0000;}/*오른쪽 상단*/
.t_m{height:10px;font-size:0%;width:100%; background:#7F0000;}/*좌우로 늘릴 수 있는 영역입니다. 두 경우 모두 공백으로 배치합니다. 왼쪽 및 오른쪽 모서리 컨테이너*/
/*중급 스타일*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*같은 높이의 두 열*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;배경:#7F0000;} /*왼쪽 테두리*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px; background:#7F0000;} /*오른쪽 테두리*/
/*하단 스타일*/
.b_m{padding:0 10px;height:10px;}/*왼쪽과 오른쪽으로 늘릴 수 있는 영역입니다. 두 경우 모두 왼쪽과 오른쪽 열에 같은 높이의 컨테이너를 배치할 수 있도록 공백을 남겨둡니다*/
.b_m 범위{너비:100%;높이:10px;글꼴 크기:0%;배경:#7F0000;}
.b_l,.b_r{높이:10px;글꼴 크기:0%;너비:10px;여백-상단:-10px;}
.b_l{float:left; background:#ff0000;}/*왼쪽 하단 모서리*/
.b_r{float:right; background:#ff0000;}/*오른쪽 하단 모서리*/
/*컨텐츠 영역*/
.context{배경:#D45F00;}
h3{text-align:center;font-size:14px;width:80%;margin:0 auto;line-height:26px;}
p{line-height:22px;padding:0 20px;text-align:left;}
a:link,a:visited{color:#fff;font-weight:bold;}
a:hover{색상:녹색;}
</style>
</head>
<본문>
<div 클래스="상자">
<BGSOUND CEP="5" />
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span>
<BGSOUND CEP="6" />
<span class="m_l"></span>
<span class="m_r"></span>
<div 클래스="컨텍스트">
<h3>깨지지 않는 9개의 정사각형 그리드 레이아웃</h3>
<p>9개의 정사각형 그리드 레이아웃 모델입니다. 사진이 로드되지 않았습니다. 원하는 대로 창을 늘리고 크기를 조정하세요. 9개의 정사각형 그리드가 모든 방향으로 자유롭고 탄력적으로 늘어나는 것을 볼 수 있습니다. </p>
<p>이 모델은 이전 버전의 단점을 수정하여 플로팅 방식을 사용하여 IE6의 너비와 높이의 이상한 1px 버그를 방지했으며 모든 주류 브라우저와 완벽하게 호환됩니다. </p>
<p>이 모델 테스트는 다음 브라우저에서 완전히 통과되었습니다:</p>
<p>IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0. </p>
<p style="text-align:right">더 많은 원본 작품을 보려면 다음을 방문하세요: <a href="http://www.cnblogs.com/binyong" title="웹사이트로 이동">Bingjifeng 블로그</ 에></p>
<p style="text-align:right">블로그 주소: http://www.cnblogs.com/binyong</a></p>
</div>
<BGSOUND CEP="7" />
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div>
</body>
</html> |
이 기사 링크: http://www.blueidea.com/tech/web/2009/6805.asp
