CSS 적응 두 레이아웃 구현

이 문서를 참조 하는 방법을 알 필요가 친구의 적응형 왼쪽 및 오른쪽 레이아웃의 실현을 달성 하기 위해 CSS를 소개 합니다.

인스턴스

< 스타일 형식을 "Text/css" = >
몸, div, h3, p {margin: 0; padding: 0;
. 플로리다 {플 로트: 왼쪽; 디스플레이: 인라인;
. Fr {플 로트: 오른쪽; 디스플레이: 인라인;
. Cl {취소: 둘 다;

. 컨테이너 {폭: 250px; 여백: 60px 자동 0;}
. Col_rigid {폭: 62px; 높이: 62px; 플 로트: 왼쪽; 배경: url ('gh.png');
. col_flexible {여백-왼쪽: 72px;
</스타일 >

다음은 주요 부분

< div class = "컨테이너" >
< div class = "Col_rigid" >< / div >
< div class = "Col_flexible" > 오른쪽 너비 적응, 컨테이너 너비 값 시도 수정. < / div >
< / div >
< div class = "컨테이너" >
< div class = "Col_rigid" >< / div >
< div class = "Col_flexible" >
< div >
< h3 클래스 "FL" = > 부동 왼쪽 < / h3 >< 클래스를 "fr" href = "#" = > float < /a >를 마우스 오른쪽
< div class = "CL" >< / div >
< / div >
난 콘텐츠 < p > </p >
< / div >
< / div >

HTML 코드는 두 div입니다.

< div class = "Col_rigid" >< / div >
< div class = "Col_flexible" >< / div >

CSS 코드는 두 개의 클래스입니다.

. col_rigid {폭: 62px; 높이: 62px;
. col_flexible {여백-왼쪽: 72px;

효과 다음 그림에 나와 있습니다.

이 구현은 매우 간결 하 게, 하지만 몇 가지 부정적인 문제를 경고 하는.

우리는 다음과 같은 효과 달성 하고자 가정:

보통 우리가 필요 부동 요소 아래 제거 요소를 사용 하는 코드 라고:

< div class = "Col_rigid" >< / div >
< div class = "Col_flexible" >
< div >
< h3 클래스 "FL" = > 부동 왼쪽 < / h3 >< 클래스를 "fr" href = "#" = > float < /a >를 마우스 오른쪽
< div class = "CL" >< / div >
< / div >
난 콘텐츠 < p > </p >
< / div >

하지만 예상치 못한 코드는 작동 하지 않습니다 우리가 원하는, 그리고 그것의 렌더링 효과 다음과 같습니다:

그림 1-3에서와 같이, 왼쪽된 열, 오른쪽 열에 있는 부동 요소 후 큰 빈 공간에 결과의 하단 아래 오른쪽 열에 있는 부동 요소 뒤에 콘텐츠 삭제는 실제 결과가입니다. 설명 하려면, 이건 IE 또는 브라우저, HTML 표준의 일종의 버그입니다. 부동의 새로운 방법을 취소 물품의 나의 번역을 참조 하십시오.

즉, 우리가 어떻게 우리가 그림을 1-2의 효과 얻을 오른쪽 열에 명확한 플 로트를 사용할 수 없습니다? 이렇게 하려면 오른쪽 열에 부동 행 div 요소에는 높이 고정 합니다. 코드는 다음과 같습니다.

< div class = "Col_rigid" >< / div >
< div class = "Col_flexible" >
< div 스타일 = "높이: 30px;" >
< h3 클래스 "FL" = > 부동 왼쪽 < / h3 >< 클래스를 "fr" href = "#" = > float < /a >를 마우스 오른쪽
< / div >
난 콘텐츠 < p > </p >
< / div >

요약: 적응형 오른쪽과 왼쪽에 우리가 그냥 수정 div 표시 디스플레이: 인라인, 그래서 우리는 사용 플 로트: 왼쪽과 rigth, 주위에 플 로트를 너무 오랫동안 부모 컨테이너 폭의 너비는 적응형 2 열 레이아웃으로 달성 될 수 있다.