레이아웃 CSS - 플라잉 날개 레이아웃과 성배

날개 레이아웃과 성배 플라잉 고전적인 세 개의 열 레이아웃입니다. 두개의 레이아웃은 실질적으로 동일한 결과를 달성하기 위해, 고정 폭의 양측에 두 개의 열 중간 컬럼 적응의 폭이다. (두 레이아웃은 상대적으로 오래된)

상단에있는 가운데 열에서 HTML 구조는 첫 번째 중간 렌더링 성능을 향상시킬 수 있도록하고, 호환성이 좋다. 두 배치의 구현과 동일한 전반부 다음은 차이 간략 것이다 장단점 후반을 달성했다.

레이아웃 효과 :

 

주의 사항 :

헤드에 위치한 1 .middle 소자 보장하기 위해 상기 제 1 렌더링 중앙부

요소가 라인에 남아 있도록 2. 세 가지 요소는, 부동

3. .middle 소자 폭의 행에서 100 %로 설정

4. .left 소자 마진 좌측에 배치 (200 픽셀 소자의 폭);] -200 픽셀 좌단 위치를 차지하도록 -100 %를 됐지 요소는 왼쪽 가장자리에 배치

제 .left 됐지 요소 가려진 측면 .middle 소자 주위의 요소

차단 용액은 (중간 탱의 양측 개방 위치) 날개를 비행하고, 하위 요소는 좌우 채널을 위해 마진 값, .middle 제공된다.

용액 성배 레이아웃이다 차단 세 요소의 부모의 추가 패딩 특성 및 개방 위치 탱 남은 뒤에 또한, 중간 콘텐츠를 철수 (모두 상대적으로 개방 위치 탱 중간 위치)하지만 당신이 상대 위치가 왼쪽으로 사용하여 왼쪽으로 복원 할 수 있도록 : 오른쪽 마찬가지로 -200 픽셀뿐만 아니라 상대 위치 바로 복원 : -220px를

코드를 붙여 넣습니다

날개 플라잉 :

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 선두 > 

    < 메타 캐릭터 = "UTF-8" > 
    < 타이틀 > 문헌 </ 타이틀 > 
    < 스타일 > 
    .middle { 
        폭 : 100 % ; 
        높이 : 200 픽셀 ;    
        배경 : #abcdef ; 
        플로트 : 왼쪽 ; 
    } 
    .middleChild { 
        / *마진 : 0 200 픽셀; * / 
        신장 : 100 % ; 
    } 
    .left, 됐지 { 
        폭 : 200 픽셀 ; 
        높이 : 200 픽셀 ; 
        플로트 : 왼쪽 ; 
    } 
    .left { 
        배경 : #ccc ; 
        여백 왼쪽 : -100 % ; 
    } 
    됐지 { 
        배경 : 분홍색 ; 
        여백 왼쪽 : -200 픽셀 ; 
    }
    .left, 
    .middle, 
    됐지 { 
        텍스트 정렬 : 센터 ; 
        라인 높이 : 200 픽셀 ; 
    } 

    </ 스타일 > 
</ 머리 > 
< 몸 > 
        < DIV 클래스 = "중간" > 
             < DIV 클래스 = "middleChild" > 가운데 </ DIV > 
        </ DIV > 
        < DIV 클래스 = "왼쪽" > 왼쪽 </ DIV >
        DIV의 클래스 = "오른쪽" > 바로 </ DIV > 
</ 몸 > 
< 스크립트 > 


</ 스크립트 > 
</ HTML >

코드보기

성배 레이아웃

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 선두 > 

    < 메타 캐릭터 = "UTF-8" > 
    < 타이틀 > 문헌 </ 타이틀 > 
    < 스타일 > 
    .container { 
        패딩 : 0 200 픽셀 ; 
    } 
    .middle { 
        폭 : 100 % ; 
        높이 : 200 픽셀 ;    
        배경 : #abcdef ;
        플로트 : 왼쪽 ; 
        / * 총수 : 상대; * / 
    } 
    .middleChild { 
        / * 마진 : 0 200 픽셀; * / 
        신장 : 100 % ; 
    } 
    .left, 됐지 { 
        폭 : 200 픽셀 ; 
        높이 : 200 픽셀 ; 
        플로트 : 왼쪽 ; 
        위치 : 상대 ; 
    } 
    .left { 
        배경 : #ccc ; 
        여백 왼쪽: -100 % ; 
        왼쪽 : -200 픽셀 ; 
    } 
    됐지 { 
        배경 : 분홍색 ; 
        여백 왼쪽 : -200 픽셀 ; 
        우측 : -200 픽셀 ; 
    } 
    .left, 
    .middle, 
    됐지 { 
        텍스트 정렬 : 왼쪽 ; 
        라인 높이 : 200 픽셀 ; 
    } 

    </ 스타일 > 
</ 머리 > 
< 몸 > 
    < DIV클래스 = "용기" > 
        < DIV 클래스 = "중간" > 
             <! - <DIV 클래스 = "middleChild"> 가운데 </ DIV> -> 
             중간 
        </ DIV > 
        < DIV 클래스 = "왼쪽" > 왼쪽 </ DIV > 
        < DIV 클래스 = "오른쪽" > 바로 </ DIV > 
    </ DIV > 
</ 몸 > 
< 스크립트 > 


</ 스크립트 >
</ HTML >

View Code