이전 튜토리얼 "구궁 기본 배치"에서는 상대 위치 지정과 절대 위치 지정을 사용하여 구궁 기본 배치를 만드는 방법을 소개했습니다. 이는 사람들의 관성적 사고에 더 부합하는 방법입니다. 제작 과정의 모든 것이 당연한 문제인 것 같습니다. 그러나 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의 구조는 다음과 같은 구조로 만들 수 있습니다.
그러나 이 정의는 또 다른 문제를 야기합니다. 이 문제는 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;으로 설정합니다. 두 기둥의 높이가 동일하도록 초과 높이를 잘라냅니다.
위의 두 가지 어려운 문제를 해결하고 나면 나머지는 간단하고 즐겁습니다! [컷 페이지]
구조층
이제 이전 사례를 기반으로 구조 레이어를 조정했으므로 다음과 같은 구조가 됩니다.
인용된 내용은 다음과 같습니다.
콘텐츠 본문 영역 |
스타일 레이어
주요 스타일 설정은 다음과 같습니다.
인용된 내용은 다음과 같습니다. /*전체 컨테이너*/ .box{overflow:hidden;width:50%;margin:50px 자동 0;배경:#fff;} /*상위 스타일*/ /*중급 스타일*/ /*하단 스타일*/ |
8개의 그림을 사용하여 아름다운 9개의 정사각형 격자 상자를 만들 수 있습니다. 얼마나 완벽한지 보세요.
이 모델은 다음 브라우저에서 테스트되었습니다.
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
인용된 내용은 다음과 같습니다. <스타일 유형="텍스트/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{색상:녹색;} <본문> 깨지지 않는 9개의 정사각형 그리드 레이아웃9개의 정사각형 그리드 레이아웃 모델입니다. 사진이 로드되지 않았습니다. 원하는 대로 창을 늘리고 크기를 조정하세요. 9개의 정사각형 그리드가 모든 방향으로 자유롭고 탄력적으로 늘어나는 것을 볼 수 있습니다. 이 모델은 이전 버전의 단점을 수정하여 플로팅 방식을 사용하여 IE6의 너비와 높이의 이상한 1px 버그를 방지했으며 모든 주류 브라우저와 완벽하게 호환됩니다. 이 모델 테스트는 다음 브라우저에서 완전히 통과되었습니다: IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0. 더 많은 원본 작품을 보려면 다음을 방문하세요: Bingjifeng 블로그 블로그 주소: http://www.cnblogs.com/binyong |