아주 좋은 기본 CSS 레이아웃의 16가지 예_기본 튜토리얼

단일 행 및 단일 열

단일 행 및 단일 열 1: 부동 소수점을 사용하여 왼쪽 상단 모서리에 고정된 너비로 부동합니다.

#content { float: 왼쪽; 여백: 20px; 배경: #FFF; 단색 #666; /* ie5win 퍼지 시작: "\"}\ ""; voice-family:inherit; width: 370px; }html>body #content { width: 370px /* ie5win 퍼지 종료 */ }

단일 행 및 단일 열 2

: 왼쪽 상단 모서리에 고정되고 너비가 고정되며 절대 위치 지정을 사용합니다.

#content { 위치: 절대; 왼쪽: 0px; 배경: #FFF; 너비: 400px; -family: "\"}\""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win 퍼지 종료 */ }

단일 행 및 단일 열 3

: 왼쪽 상단 모서리에 고정, 고정 너비 없음, 백분율(%)을 사용하여 페이지에 맞게 너비를 정의합니다.

단일 행 및 단일 열 4

(권장): 고정 너비, 본문 스타일에 정의된 센터링 속성(text-align: center;)을 사용하여 페이지를 자동으로 중앙에 배치합니다.

단일 행과 2열

단일 행과 두 개의 열 1: 두 열 모두 너비가 고정되어 있습니다. 첫 번째 열은 왼쪽 위 모서리에 부동되고 두 번째 열은 첫 번째 열의 오른쪽에 부동됩니다.

단일 행과 2열 2

: 두 열 모두 백분율 너비를 갖고 있지만 화면에 맞지 않습니다. 첫 번째 열은 왼쪽 위 모서리에 고정되고 두 번째 열은 첫 번째 열의 오른쪽에 떠 있습니다.

단일 행과 두 개의 열 3

: 두 열 모두 백분율 너비를 가지며 화면을 채웁니다. 두 열 모두 절대 위치에 있습니다.

단일 행과 두 개의 열 4

: 두 열 모두 백분율 너비를 가지며 화면을 채웁니다. 첫 번째 열은 왼쪽 상단에 떠 있고, 두 번째 열은 오른쪽 상단에 떠 있습니다.

단일 행과 두 개의 열 5

: 두 열 모두 백분율 너비를 가지며 화면을 채웁니다. 첫 번째 열은 왼쪽 위 모서리에 부동되고 두 번째 열은 첫 번째 열의 오른쪽에 부동됩니다.

단일 행과 3열

단일 행과 3열 1: 왼쪽 열과 오른쪽 열이 모두 절대적으로 위치합니다(오른쪽 열이 오른쪽 상단에 위치함). 왼쪽 및 오른쪽 열의 너비는 고정되어 있으며 가운데 열은 페이지에 맞게 조정됩니다.

단일 행 3열 2

: 왼쪽 열은 왼쪽 상단에 위치하고, 오른쪽 열은 오른쪽 상단에 위치하며, 가운데 열은 왼쪽 열 오른쪽에 떠 있습니다. 왼쪽 및 오른쪽 열의 너비는 고정되어 있으며 가운데 열은 페이지에 맞게 조정됩니다.

단일 행과 세 개의 열 3

: 세 개의 열이 모두 절대 위치에 있습니다. 왼쪽과 오른쪽 열의 너비는 고정되어 있으며 가운데 열은 내용에 따라 조정됩니다.

단일 행 3열 4

(권장): 여백: 20px 속성이 본문 스타일에 추가되어 Netscape 6.0에서 중간 열이 맨 위에 표시되는 문제를 해결한다는 점을 제외하면 스타일 2와 유사합니다.

단일 행과 3열 5

: 왼쪽과 오른쪽 열은 절대적 위치에 있고 가운데 열은 가변적입니다. 전체 화면 너비.

맨 위 행의 3개 열

상단 행의 3개 열 1(권장): 상단 행은 페이지 너비에 맞게 조정됩니다. 왼쪽 및 오른쪽 열은 절대 위치에 있으며 가운데 열은 페이지에 적응됩니다.

• 상단 행 3열 2

: 전체 화면 너비