단일 행 및 열
다음은 인용문입니다:
본문 { 여백: 0px; 텍스트 정렬: 센터 }
#content { 여백-왼쪽:자동; 너비: 400px;
행 2개와 열 1개
다음은 인용문입니다:
본문 { 여백: 0px; 텍스트 정렬: 센터;}
#content-top { 여백-왼쪽:자동; 여백-오른쪽:자동;
#content-end {margin-left:auto; 여백-오른쪽:auto; 너비: 370px;}
행 3개와 열 1개
다음은 인용문입니다:
본문 { 여백: 0px; 텍스트 정렬: 센터 }
#content-top { 여백-왼쪽:자동; 너비: 400px;
#content-mid { 여백-왼쪽:자동; 여백-오른쪽:자동;
#content-end { 여백-왼쪽:자동; 너비: 400px;
단일 행과 2개의 열
다음은 인용문입니다:
#bodycenter { 너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;오버플로: 자동;
#bodycenter #dv1 {float: 왼쪽;너비: 280px;}
#bodycenter #dv2 {float: 오른쪽;너비: 410px;}
두 개의 행과 두 개의 열
다음은 인용문입니다:
#header{ 너비: 700px; 여백-오른쪽: 자동;여백-왼쪽: 자동;}
#bodycenter { 너비: 700px; 여백-왼쪽: 자동;
#bodycenter #dv1 { 부동: 왼쪽: 280px;}
#bodycenter #dv2 { 부동: 오른쪽; 너비: 410px;}
행 3개와 열 2개
다음은 인용문입니다:
#헤더{ 너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;
#bodycenter {너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;
#bodycenter #dv1 { 부동: 왼쪽; 너비: 280px;}
#bodycenter #dv2 { 부동: 오른쪽: 410px;}
#footer{ 너비: 700px; 여백-왼쪽: 자동;
단일 행 및 3개 열
절대 위치
다음은 인용문입니다:
#왼쪽 { 위치: 절대; 위쪽: 0px; 너비: 120px }
#중간 {여백: 20px 190px 20px 190px }
#오른쪽 {위치: 절대; 상단: 0px; 오른쪽: 0px;
플로트 포지셔닝 1
xhtml:
다음은 인용문입니다:
<div id="워프">
<div id="열">
<div id="column1">첫 번째 열입니다</div>
<div id="column2">두 번째 열입니다</div>
<div class="clear"></div>
</div>
<div id="column3">세 번째 열입니다</div>
<div class="clear"></div>
</div>
CSS:
다음은 인용문입니다:
#wrap{너비:100%;자동;}
#열{ 부동:왼쪽 너비:60%;}
#열1{ 부동:왼쪽 너비:30%;}
#column2{ 부동소수점:오른쪽; 너비:30%;}
#column3{ 부동:오른쪽; 너비:40%;}
.clear{ 클리어: 둘 다;}
플로트 위치 지정 2
xhtml:
다음은 인용문입니다:
<div id="center" 클래스="열">
<h1>주요 내용입니다.</h1>
</div>
<div id="왼쪽" 클래스="열">
<h2>왼쪽 사이드바입니다.</h2>
</div>
<div id="right" 클래스="열">
<h2>오른쪽 사이드바입니다.</h2>
</div>
CSS:
다음은 인용문입니다:
본문 {여백: 0; 왼쪽 패딩: 200px; 오른쪽 패딩: 190px; 최소 너비: 240px;}
.column {위치: 상대;플로트: 왼쪽;}
#중심 {너비: 100%;}
#왼쪽 {폭: 180px; 오른쪽: 240px; 여백-왼쪽: -100%;}
#right {너비: 130px;여백-오른쪽: -100%;}
행 2개와 열 3개
xhtml:
다음은 인용문입니다:
<div id="header">맨 위 행은 다음과 같습니다</div>
<div id="워프">
<div id="열">
<div id="column1">첫 번째 열입니다</div>
<div id="column2">두 번째 열입니다</div>
<div class="clear"></div>
</div>
<div id="column3">세 번째 열입니다</div>
<div class="clear"></div>
</div>
CSS:
다음은 인용문입니다:
#헤더{너비:100%; 높이:자동;}
#wrap{너비:100%;자동;}
#열{ 부동:왼쪽 너비:60%;}
#열1{ 부동:왼쪽 너비:30%;}
#column2{ 부동소수점:오른쪽; 너비:30%;}
#column3{ 부동:오른쪽; 너비:40%;}
.clear{ 클리어: 둘 다;}
세 개의 행과 세 개의 열
xhtml:
다음은 인용문입니다:
<div id="header">맨 위 행은 다음과 같습니다</div>
<div id="워프">
<div id="열">
<div id="column1">첫 번째 열입니다</div>
<div id="column2">두 번째 열입니다</div>
<div class="clear"></div>
</div>
<div id="column3">세 번째 열입니다</div>
<div class="clear"></div>
</div>
<div id="footer">맨 아래 행입니다</div>
CSS:
다음은 인용문입니다:
#헤더{너비:100%; 높이:자동;}
#wrap{너비:100%;자동;}
#열{ 부동:왼쪽 너비:60%;}
#열1{ 부동:왼쪽 너비:30%;}
#column2{ 부동소수점:오른쪽; 너비:30%;}
#column3{ 부동:오른쪽; 너비:40%;}
.clear{ 클리어: 둘 다;}
#바닥글{너비:100%; 높이:자동;}
추신: 여기에 나열된 예는 연구 목적이 아닌 일반적으로 사용되는 예입니다. 각 상자에 대해 여백, 패딩, 보더 및 기타 속성이 설정되지 않습니다.