CSS 웹 페이지 레이아웃 입문 강좌 6:왼쪽 열 고정,오른쪽 열 너비 적응

실제 응용 프로그램 에서 왼쪽 표시 줄 의 고정 폭 이 필요 할 때 가 있 습 니 다.오른쪽 표시 줄 은 브 라 우 저 창 크기 에 따라 자동 으로 적응 되 고 CSS 에서 이러한 레이아웃 방식 을 실현 하 는 것 은 간단 하고 실행 가능 합 니 다.왼쪽 표시 줄 의 폭 만 설정 하면 됩 니 다.예 를 들 어 상기 왼쪽 표시 줄 은 백분율 로 너비 적응 을 실 현 했 고 우 리 는 왼쪽 표시 줄 의 폭 을 고정 값 으로 설정 해 야 합 니 다.오른쪽 칸 은 너비 값 을 설정 하지 않 고 오른쪽 칸 은 움 직 이지 않 습 니 다.코드 는 다음 과 같 습 니 다

#left {  
    background-color: #E8F5FE;  
    border: 1px solid #A9C9E2;  
    float: left;  
    height: 300px;  
    width: 200px;  
}  
#right {  
    background-color: #F2FDDB;  
    border: 1px solid #A5CF3D;  
    height: 300px;  
} 

그러면 왼쪽 칸 은 100%너비 가 되 고 오른쪽 칸 은 브 라 우 저 창 크기 에 따라 적응 합 니 다.[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]2 열 오른쪽 열 너비 적응 은 사이트 에서 자주 사용 되 며,불공평 하면 오른쪽 열 일 수도 있 고,방법 은 같 으 며,두 개의 div 의 작성 만 바 꾸 면 된다.이러한 애플 리 케 이 션 은 현재 많은 블 로그 에서 자주 볼 수 있 습 니 다.예 를 들 어 pjblog 의 많은 네티즌 들 이 만 든 템 플 릿 은 바로 이런 구조 입 니 다.제작 과정 은 여기 서 더 이상 상세 하 게 설명 하지 않 겠 습 니 다.이전 튜 토리 얼 을 참고 하 십시오.CSS 홈 페이지 레이아웃 입문 튜 토리 얼 5:2 열 너비 적응,왼쪽 열의 폭 을 200 px 로 바 꾸 고 오른쪽 열의 너비 와 왼쪽으로 이동 하면 됩 니 다.모 르 는 부분 이 있 으 면 아래 에서 질문 하거나 게시판 에 메 시 지 를 남 겨 주 십시오.