DIV + CSS: 페이지 2-행 배경 적응

웹 페이지의 주요 부분 나누어 두 행. 대부분의 경우에서 디자이너는 종종 콘텐츠 블록 하지만이 겉보기 간단한 레이아웃 디자인과 매우 어려운 문제의 구현 사이 명확한 구별을 달성 하기 위해 다른 색상으로 배경 색상의 왼쪽과 오른쪽 두 개의 열을 넣어 웹 페이지 레이아웃에는 일반적인 상황이 이다 그건 어떻게와 적응, 배경 높이 달성 하기 위해 오른쪽 두 개의 열 왼쪽과 왼쪽된 콘텐츠는 배경 색상의 오른쪽 왼쪽; 동일 해야 보다 높은

이 달성 하기 위해 인터넷에 수많은 기사를 검색 한 내가 돌아왔다, 좋은 솔루션, 큰 수의 음수와 일부 JavaScript를 사용 하 고 다음 그것은 이해가 되지 않습니다, 때문에 난 항상 양식을 사용 하 여, 대부분의 사람들이 있기 때문에 쉬운; 하지만 오늘은 내 동료 질문 나이, 내가 정오에 그것에 대해 생각는 솔루션, 작성 및 공유할;

원칙:

1, 레이아웃 하지이 효과 달성 하 고 부풀어; 되는 HTML 코드를 확인 하는 게 되어야
2, CSS 부분 또한 간단한 독창적인 실현, 수 없습니다 쓰기 대규모 코드 효과, 하지만 주요 브라우저 호환성 측면의이 종류에 대 한 아무 문제가 있어야;

이 레이아웃은 아직, 이상적인 하지 하지만 이것은 내가 시간이 되 고;에 대 한 생각할 수 있는 최고의 솔루션을 설명 하기 위해 구현 하는 코드는

구현 방법 1: 테두리, 배경 색상; 오른쪽 왼쪽

이 메서드는 200PX 테두리 배경의 열을 달성 하 고 다음를 사용 하 여 라벨의 실제 배경색 달성 다른 열 배경, 왼쪽과 오른쪽은 항상 같은 높이;를 왼쪽합니다

프로그램 코드

< div id = "상자" >
< div id = "오른쪽" > 오른쪽 < br / >
< div id = "왼쪽" > 왼쪽 < / div >
< div 스타일 = "취소: 둘 다" >< / div >
< / div >

프로그램 코드

< 스타일 & gt
/ *이 선 보일 수 있습니다, 그것은 말도 안 되, 좋은 합니다. * /
* {패딩: 0; 여백: 0; 글꼴-크기: 12px; 라인-높이: 1.8; 글꼴-가족 : 굴림;
/ / * Outermost 상자, 왼쪽된 테두리 200PX, 배경 색상 * /
#box {배경: #FFCC00; 너비: 700px 국경-왼쪽: 200px 단단한 #FF9900;}
/ * 200px * 이동 하려면 왼쪽에 열을 떠나 /
#left {여백-왼쪽:-200px; 너비: 200px 위치: 정적;}
/ * 때문에 차이 IE와 파이어 폭스, IE 추가 처리를 위해 행 * /
* HTML #left {위치: 고정}
/ * 오른쪽 폭, 왜 내가 당신에 게 진실을, 700PX 여기;을 쓰지 않았다 난 정말 싶지 않았다 이해;이 쓰여질 수 900-200-2 = 698px; * /
#right {float: 오른쪽 폭 : 695px;}
< / 스타일 >

<! 공용 DOCTYPE HTML "-//W3C//DTD XHTML 1.0 전환 / / 엉" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
< html xmlns =" http://www.w3.org/1999/xhtml "> < 머리 >

< 메타 http-equiv =" 콘텐츠 형식 " 콘텐츠 = "text/html; 문자셋 = utf-8 "/ & gt < 제목 > http://www.jzread.com</title> < 스타일 >


* {패딩: 0; 여백 : 0; 글꼴-크기: 12px; 라인-높이: 1.8; 글꼴-가족: 굴림;
#box {배경: #FFCC00; 너비: 700px 국경-왼쪽: 200px 단단한 #FF9900;}
#left {여백-왼쪽:-200px; 너비: 200px; 위치: 정적;}
* HTML #left {위치: 고정;}
#right {플 로트: 오른쪽; 폭: 695px;}
< / 스타일 & gt
< / 머리 & gt
< 바디 & gt
< div id = "상자" >
< div id = "오른쪽" > 오른쪽 < br / > 오른쪽 < / div >
< div id = "왼쪽" > 왼쪽 < / div >
< div 스타일 = "취소: 둘 다" >< / div >
< / Div >
< / 바디 >
< / html >
메서드 한 질문: 만일 왼쪽에 배경 그림은? 예, 그것은 순수한 색깔, 아무 문제는 거기; 그림의 경우, 방법은 없습니다.내가 쓴 두 번째 솔루션.
구현 방법 2: 두 열의 중첩 된 구현; 제가 개인적으로 추천 합니다;이 메서드를 사용 하 여

프로그램 코드

< div id = "상자" >
< div id = "내용" >
< div id = "오른쪽" > 오른쪽 < br / > 오른쪽 < / div >
< div id = "왼쪽" > 왼쪽 < / div >
< / div >
< / div >

CSS 부분 내가 그것을 설명할 필요가 없습니다!

프로그램 코드

< 스타일 >
* {패딩: 0; 여백: 0; 글꼴-크기: 12px; 라인-높이: 1.8; 글꼴-가족: 굴림;
#box {배경: #FFFF66; 너비: 700px; 여백-왼쪽: 200px; 플 로트: 왼쪽;}
#content {배경: #FF6600; 플 로트: 왼쪽;}
#right {폭: 695px; 플 로트: 오른쪽;}
#left {폭: 200px; 여백-왼쪽:-200px; 위치: 정적; 플 로트: 왼쪽;}
* HTML #left {위치: 고정;}
</스타일 >

<! 공용 DOCTYPE HTML "-//W3C//DTD XHTML 1.0 전환 / / 엉" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
< html xmlns =" http://www.w3.org/1999/xhtml "< 머리 >

< 메타 http-equiv =" 콘텐츠 형식 " 콘텐츠 = "text/html; 문자셋 = utf-8 "/ > < 제목 > http://www.jzread.com</title> < 스타일 >

* {패딩: 0; 여백: 0; 글꼴-크기: 12px; 라인-높이: 1.8; 글꼴-가족: 굴림;
#box {배경: #FFFF66; 너비: 700px; 여백-왼쪽: 200px; 플 로트: 왼쪽;}
#content {배경: #FF6600; 플 로트: 왼쪽;}
#right {폭: 695px; 플 로트: 오른쪽;}
#left {폭: 200px; 여백-왼쪽:-200px; 위치: 정적; 플 로트: 왼쪽;}
* HTML #left {위치: 고정;}
< / 스타일 & gt
< / 머리 & gt
< 바디 >
< div id = "상자" >
< div id = "내용"
< Div id = "오른쪽" > 오른쪽 < br / > 오른쪽 < / div >
< div id = '왼쪽' > 왼쪽 < / div >< / div >< / div
소스를 지정 하십시오 무단 전재: 건설 역 교육 네트워크
< / 바디 >
< / HTML & Gt;