CSS 연구 노트 - 성배 레이아웃과 비행 날개

날개 성배 레이아웃 비행 중간 적응 세 열 레이아웃의 좌우 폭에 고정되어, 주요 차이점은 다른 구현 예에있다.

첫째, 성배 레이아웃

< 사업부의 클래스 = "부모" > 
    < DIV 클래스 = "센터" > 센터 </ DIV 디스플레이 렌더링 우선 사설의 주요부> // DOM 구조 
    < DIV 클래스 = "왼쪽" > 왼쪽 </ DIV > 
    < DIV 클래스 = "오른쪽" > 바로 </ DIV > 
</ DIV >

.parent { 
    패딩 : 0 100 픽셀 ; 
} 
.center, .left, 됐지 { 
    높이 : 100 픽셀 ; 
    플로트 : 왼쪽; 
} 
.center { 
    폭 : 100 % ; 
    배경 색 : 노란색 ; 
} 

.left { 
    마진 왼쪽 : -100 %; 
    폭 : 100 픽셀 ; 
    배경 색상 : 빨강 ; 
    위치 : 상대 ; 
    왼쪽: -100px ; 
} 
됐지 { 
    위치 : 상대 ; 
    우측 : -100px ; 
    여백 왼쪽 : -100px ; 
    폭 : 100 픽셀 ; 
    배경 색상 : springgreen ; 
}

달성하기위한 세부 단계 단계 :

1. 세 개의 열이 같은 행동을 부동 상태로 설정했다.

2.center 메인 콘텐츠 섹션 배치 폭 : 100 %가 전체 행의 왼쪽과 오른쪽을 채우고 다음 행 부분을 가압되도록.

3. 왼쪽 부분은 여백 좌측에 제공되며, 문서의 흐름은 두 번째 행의 처음에 남아 있기 -100 % 마진 왼쪽 흐름 문서, 전방, 즉 네거티브 이동에 기초 어떠한 음의 값은 제 2 이동에 설정된 라인 -100 % 문서 흐름의 시작 위치로 이동한다. 여백 왼쪽은 오른쪽 첫 번째 행의 마지막 부분을 만들기 위해, 오른쪽의 우측 부분의 폭의 음의 부분과 동일하게 설정.

4. 동일 행에서 좌우 세 개의 열을 가지고 있지만, 폭 중앙부가 가려 각각 좌측 및 우측으로 이어지는 100 %의 전체 라인을 충전하기 때문에, 우리는 패딩 속성의 폭과 거의 동일한 설정 친 요소, 그 중앙부 그래서 빈 위치의 감소는 좌우측 부.

5. 마지막으로, 왼쪽의 상대 위치에 각각 배치 오른쪽 부, 오프셋 각 폭은 최종 결과를 달성하기 위해 비워 위치로 이동.

둘째, 플라잉 윙

< DIV 클래스 = "콘텐츠" > 
    < DIV 클래스 = "센터" > 
        < DIV 클래스 = "center_content" > 센터 </ DIV > 
    </ DIV > 
    < DIV 클래스 = "왼쪽" > 왼쪽 </ DIV > 
    < DIV 클래스 = "오른쪽" > 바로 </ DIV > 
</ DIV >

.center, .left, 됐지 { 
    높이 : 100 픽셀 ; 
    플로트 : 왼쪽 ; 
} 
.center { 
    폭 : 100 % ; 
    배경 색 : 노란색 ; 
} 
.center_content { 
    마진 : 0 100 픽셀 ; 
} 
.left { 
    마진 왼쪽 : -100 % ; 
    폭 : 100 픽셀 ; 
    배경 색상 : 빨강 ; 
} 
됐지 {
    여백 왼쪽 : -100px ; 
    폭 : 100 픽셀 ; 
    배경 색상 : springgreen ; 
}

달성하기위한 세부 단계 단계 :

중앙 부분의 HTML DIV 한층 1.

2. 세 개의 열은 각각 같은 줄에 떠 떠났다.

3.center 메인 콘텐츠 섹션 배치 폭 : 100 %가 전체 행의 왼쪽과 오른쪽을 채우고 다음 행 부분을 가압되도록.

제 왼쪽 부분은 여백 좌측에 제공되며, 문서의 흐름은 두 번째 행의 처음에 남아 있기 -100 % 마진 왼쪽 흐름 문서, 전방, 즉 네거티브 이동에 기초 어떠한 음의 값은 제 2 이동에 설정된 라인 -100 % 문서 흐름의 시작 위치로 이동한다. 여백 왼쪽은 오른쪽 첫 번째 행의 마지막 부분을 만들기 위해, 오른쪽의 우측 부분의 폭의 음의 부분과 동일하게 설정.

왼쪽 및 오른쪽 위치의 중심부 내의 공간은, 최종 효과를 얻을 수 있도록 제 좌우 부 동일한 내부 중심 DIV 설정 마진 폭을 추가한다.

성배 레이아웃 전에 날개 구성 단계를 비행하는 것은 다음과 같은 차이가, 동일 :

　　날개 플라잉 : 실내 별도의 사업부를 추가하는 속성의 마진을 설정합니다

　　성배 레이아웃 : 부모 요소 배치 패딩 특성은 좌우 부분은 상대 위치 오프셋

CSS 연구 노트 - 성배 레이아웃과 비행 날개

추천