유동 포 지 셔 닝 방식 을 사용 하여 한 열 에서 여러 열 까지 의 고정 너비 와 자가 적응 은 기본적으로 세 열의 고정 폭 을 포함 하여 간단하게 완성 할 수 있다.여기 서 우리 에 게 새로운 요 구 를 제 시 했 습 니 다.3 열 식 구 조 를 원 합 니 다.기 중 왼쪽 칸 은 고정 폭 을 요구 하고 왼쪽 에 표시 하 며 오른쪽 칸 은 고정 폭 과 오른쪽 에 표시 해 야 합 니 다.중간 칸 은 왼쪽 칸 과 오른쪽 칸 의 중간 에 있어 야 합 니 다.왼쪽 칸 의 간격 변화 에 따라 자동 으로 적응 해 야 합 니 다.이것 은 레이아웃 에 새로운 요 구 를 제 시 했 습 니 다.또한 단순히 float 속성 과 백분율 속성 을 사용 하면 실현 되 지 않 습 니 다.CSS 는 아직 백분율 계산 을 지원 하지 않 습 니 다.왼쪽 표시 줄 과 오른쪽 표시 줄 의 점 위 를 고려 할 때 까지 정확 합 니 다.중간 표시 줄 에 100%폭 을 사용 하면 왼쪽 표시 줄 과 오른쪽 표시 줄 의 중간 간격 이 아 닌 브 라 우 저 창의 폭 을 사용 합 니 다.그래서 우 리 는 이 문 제 를 고려 할 새로운 사고방식 이 필요 하 다.절대적 인 포 지 셔 닝 은 이러한 3 열 구 조 를 시작 하기 전에 새로운 포 지 셔 닝 방식 인 절대적 인 포 지 셔 닝 을 이해 할 필요 가 있다.앞의 유동 포 지 셔 닝 방식 은 주로 브 라 우 저 에서 대상 의 내용 에 따라 자동 으로 유동 방향 을 조정 하지만 이런 방식 이 포 지 셔 닝 수 요 를 만족 시 키 지 못 할 때 새로운 방법 으로 이 루어 져 야 한다.CSS 가 제공 하 는 유동 포 지 셔 닝 을 제외 한 다른 포 지 셔 닝 방식 은 절대적 인 포 지 셔 닝 이 고 절대적 인 포 지 셔 닝 은 position 속성 으로 이 루어 진다.position 는 대상 의 포 지 셔 닝 방식 을 설정 하 는 데 사용 할 수 있 는 값 입 니 다.static/absolute/relative 는 페이지 의 모든 대상 에 게 기본 position 속성 은 static 입 니 다.대상 을 position:absolute 로 설정 하면 대상 은 전체 페이지 의 위치 에 따라 재 포 지 셔 닝 됩 니 다.이 속성 을 사용 할 때 top,right,bottom,left 즉 상하 왼쪽 네 방향의 거리 값 을 사용 하여 대상 의 구체 적 인 위 치 를 확인 할 수 있 습 니 다.아래 CSS:\#layot { position:absolute; top:20px; left:0px; } 만약\#layot 가 position:absolute 를 사용 했다 면;절대 포 지 셔 닝 모드 가 됩 니 다.이 동시에 top:20px 를 설정 할 때;브 라 우 저 창 위 20px,left:0px 에서 영원히 떨 어 집 니 다.브 라 우 저 왼쪽 에서 0px 로 떨 어 질 수 있 도록 합 니 다.메모:대상 이 position:absolute 를 설정 하면;이 는 본질 적 으로 다른 대상 과 분 리 될 것 이다.그의 포 지 셔 닝 모델 은 다른 대상 에 게 영향 을 주지 않 고 다른 대상 의 유동 포 지 셔 닝 에 영향 을 주지 않 는 다.특정한 의미 에서 볼 때 절대적 인 포 지 셔 닝 을 사용 한 후에 대상 은 하나의 그림 처럼 웹 페이지 위 에 떠 있다.절대 포 지 셔 닝 후의 대상 은 페이지 의 변동 관 계 를 고려 하지 않 고 대상 의 top,right,bottom,left 네 방향의 값 만 설정 하면 됩 니 다.이 사례 에서 절대적 인 포 지 셔 닝 을 사용 하면 우리 가 제기 한 문 제 를 잘 해결 할 수 있다.마찬가지 로 3 개의 div 를 사용 하여 우리 의 세 개의 칸 구 조 를 형성 합 니 다
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
left: 0px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
right: 0px;
}
그러면 왼쪽 칸 은 왼쪽 왼쪽 왼쪽 ft:0px 에서 떨 어 집 니 다.왼쪽 가장자리 에 붙 여 표시 하고 오른쪽 표시 줄 은 right 입 니 다. 0px;오른쪽 칸 거 리 를 오른쪽 으로 표시 합 니 다.가운데 에 있 는\#center 는 일반적인 CSS 스타일 을 사용 합 니 다
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 202px;
margin-left: 202px;
}
\#center 에 대해 우 리 는 변동 방식 을 설정 할 필요 가 없습니다.왼쪽 바깥쪽 거 리 를 영원히 유지 하면\#lef 와\#right 의 너 비 를 양쪽 에서 각각 202 px 의 적응 폭 을 양보 하고 좌우 양쪽 에서 양보 하 는 거 리 를 실현 합 니 다.\#lef 와\#right 를 이 공간 에 표시 합 니 다.그래서 이 루어 졌 을 뿐 입 니 다.
3 열 좌우 고정 너비 중간 적응―AA25.CN왼쪽 열
