세 가지 레이아웃 (성배, 플라잉 윙)

성배 레이아웃 두 앵커 중간 적응;

　　코드 요소 :

<DIV 클래스 = " 상자 " > 
        <DIV 클래스 = " 내용 " > 
           
        </ DIV> 
        <DIV 클래스 = " 왼쪽 " >左</ DIV> 
        <DIV 클래스 = " 권리 " >右</ DIV> 
  </ DIV>

　　레이아웃 코드 :

.box {

여백 : 0 픽셀 자동;

폭 : 800 픽셀;

높이 : 200 픽셀;

국경 : 1 픽셀의 빨간색으로;

패딩 : 0 200 픽셀;

}

　　　　　콘텐츠의 폭이 작아지게하기 위해 패딩 값 친 박스를 설정 좌우 위치에 좌측.

.box> DIV {

왼쪽으로 뜨다;

높이 : 200 픽셀;

}

.content {

폭 : 100 %;

배경 색상 : antiquewhite

}

.왼쪽 {

폭 : 200 픽셀;

높이 : 200 픽셀;

배경 : cadetblue;

여백 왼쪽 : -100 %;

위치 : 상대;

왼쪽 : -200 픽셀;

}

.권리 {

폭 : 200 픽셀;

배경 : cadetblue;

여백 왼쪽 : -200 픽셀;

위치 : 상대;

왼쪽 : 200 픽셀;

}

　　　　　* / 패딩의 사용 후, 부모 컨테이너의 너비를 설정하지 않기 때문에 컨텐츠 영역의 폭은 잎 충분한 위치의 양쪽에 작은에서 주요의 폭을 작아지기 때문이 아니라 우리가 또한 필요, 부모 컨테이너 패딩 영역을 교차 할 수 없습니다 부동 컬럼 주변 위치의 상대 위치를 이동. / *

날개 플라잉 :

　　용기의 중간 부분의 레이어를 넣으려면, 이렇게 한 후, 큰 용기가 더 이상 패딩 값을 설정해야합니다, 왼쪽과 오른쪽 열 상자는 상대적 배치, 간소화 된 코드를 많이 설정해야 없지만, 레이아웃을 변경하지 않을 것은 특히 좁은하지 않습니다 문제의 엉망.

<DIV 클래스 = " 상자 " > 
        <DIV 클래스 = " 계속 " > 
            <DIV 클래스 = " 센터 " > 
                内容
             </ DIV> 
        </ DIV> 
        <DIV 클래스 = " 왼쪽 " > 
            左
         </ DIV> 
        <DIV 클래스 = " 바로 " > 
            右
         </ DIV> 
    </ DIV>

레이아웃 코드 :

    .box { 
            폭 : 800 픽셀; 
            높이 : 400 픽셀; 
            국경 : 1 픽셀의 빨간색으로; 
            마진 : 100 픽셀 자동; 
        } 
        .box > DIV {
             플로트 : 왼쪽; 
            높이 : 400 픽셀; 
        } 
        .cont { 
            폭 : 100 % ; 

        } 
        .center { 
            배경 : 빨간색; 
            마진 : 0 200 픽셀; 
            높이 : 400 픽셀; 
        } 
        .left { 
            배경 : 파란색; 
            폭 : 200 픽셀; 
            여유- 왼쪽 : - (100) % ; 
        } 
        됐지 { 
            배경 : 분홍색; 
            폭 : 200 픽셀; 
            여백 - 왼쪽 : - 200 픽셀; 
        }

효과는 그렇게 구성되고

세 가지 레이아웃 (성배, 플라잉 윙)

추천