CSS 웹 페이지 레이아웃 입문 튜토리얼 5: 두 개의 열 너비 적응형_기본 튜토리얼

2열 고정 너비부터 시작하여 2열 레이아웃을 시도하기 시작하면 왼쪽 및 오른쪽 열의 너비가 적응될 수 있습니다. 1열 적응형 레이아웃에서는 적응형 설정이 주로 다음과 같이 설정된다는 것을 알고 있습니다. 따라서 2열 너비 적응형 레이아웃에서도 위의 CSS 코드에 이어 두 번째 열의 너비 값을 새로 정의해야 합니다.

코드 복사 코드는 다음과 같습니다.

#left {
background-color: # E8F5FE;
테두리: 1px 솔리드 #A9C9E2; float: 왼쪽;
높이: 300px
너비: 20%
#right {
배경색 : #F2FDDB;
테두리: 1px #A5CF3D; 왼쪽 열의 너비는 너비의 20%로 설정되고 오른쪽 열의 너비는 너비의 70%로 설정됩니다. %는 왼쪽에 탐색 기능이 있고 오른쪽에 콘텐츠가 있는 일반적인 웹 페이지처럼 보입니다.

2열 너비 적응형——AA25.CN

왼쪽 열——(AA25.CN) 오른쪽 열 - 2열 너비 적응형(AA25.CN)<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <style type="text/css"> <!-- #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%; } --> </style> <div id="left"> </div>[Ctrl+A 氇