CSS 웹 페이지 레이아웃 입문 튜 토리 얼 5:2 열 너비 적응

2 열 고정 너비 에 착안 하여 2 열 구 조 를 시도 하 는 상황 에서 좌우 표시 줄 너비 가 적응 할 수 있 습 니 다.1 열 적응 구조 에서 우 리 는 적응 설정 은 주로 너비 의 백분율 값 설정 을 통 해 이 루어 진 다 는 것 을 알 고 있 습 니 다.따라서 2 열 너비 가 적응 하 는 구조 에서 도 백분율 너비 값 에 대한 디자인 이 고 위의 CSS 코드 를 계속 합 니 다.우 리 는 2 열의 너비 값 을 새로 정의 해 야 한다. 

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

왼쪽 칸 의 너 비 는 너비 20%,오른쪽 칸 의 너 비 는 너비 의 70%로 설정 되 어 있 으 며 왼쪽 이 네 비게 이 션 이 고 오른쪽 이 내용 인 흔 한 웹 페이지 형식 처럼 보 입 니 다.[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]왜 오른쪽 칸 을 80%로 설정 하지 않 았 습 니까?이 문제 의 원인 향 은 대상 의 다른 속성 으로 볼 때 모두 기억 해 야 합 니 다.미리 보기 에서 레이아웃 을 더욱 명확 하 게 하기 위해 border 속성 을 사용 하여 두 대상 이 모두 1px 의 테 두 리 를 가지 게 했 습 니 다.CSS 레이아웃 에서 한 대상 의 너 비 는 width 값 에 의 해 결정 되 는 것 이 아니 라 한 대상 의 진실 한 너 비 는 대상 자체 의 너비,대상 의 좌우 여백 에 의 해 결정 되 었 습 니 다.그리고 좌우 테두리,그리고 안쪽 거 리 를 이 속성 들 을 더 해서 만 들 었 기 때문에 왼쪽 대상 은 브 라 우 저 창의 20%너비 뿐만 아니 라 왼쪽 테두리 의 너비 도 더 해 야 합 니 다.이렇게 계산 하면 좌우 표시 줄 이 자신의 백분율 폭 을 초과 하고 최종 너비 도 브 라 우 저 창의 폭 을 초과 하기 때문에 오른쪽 표시 줄 은 두 번 째 줄 에서 밀 려 나 좌우 표시 줄 의 효 과 를 추진 합 니 다.따라서 100%너비 가 아 닌 실제 응용 에서 테두리 와 여백 의 사용 을 피 할 수 있 습 니 다.좌우 와 브 라 우 저 를 채 우 는 효과 가 있 습 니 다.이러한 너비 계산 에 관 한 문 제 는 CSS 레이아웃 에서 상당히 중요 한 상자 모델 이 라 고 불 리 는 문제 입 니 다.앞으로 의 튜 토리 얼 에서 상세 하 게 설명 할 것 이 니 본 사이트 의 튜 토리 얼 에 계속 관심 을 가 져 주 십시오.이 사례 의 제작 과정 은 CSS 홈 페이지 레이아웃 입문 튜 토리 얼 4:2 열 고정 너비 와 마찬가지 로 너비 설정 시 고정 적 인 200 px 폭 을 각각 20%와 70%로 바 꾸 었 을 뿐 더 이상 군말 하지 않 습 니 다.