아래의 한 줄과 열은 인용문입니다.
본문 { 여백: 0px; 텍스트 정렬: 센터 }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
다음은 2개의 행과 1개의 열입니다.
본문 { 여백: 0px; 텍스트 정렬: 센터;}
#content-top { 여백-왼쪽:자동; 여백-오른쪽:자동;
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
다음은 3개의 행과 1개의 열입니다.
본문 { 여백: 0px; 텍스트 정렬: 센터 }
#content-top { margin-left:auto; 너비: 370px; }
#content-mid { margin-right:자동; ;
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px }
다음은 따옴표 부분입니다.
#bodycenter { 너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;오버플로: 자동;
#bodycenter #dv1 {float: 왼쪽;너비: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
다음은 2개의 행과 2개의 열입니다.
#header{ 너비: 700px; 여백-오른쪽: 자동;여백-왼쪽: 자동;}
#bodycenter { 너비: 700px; 여백-왼쪽: 자동;
#bodycenter #dv1 { 부동: 왼쪽: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
다음은 3개의 행과 2개의 열입니다.
#헤더{ 너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;
#bodycenter {너비: 700px; 여백-오른쪽: 자동; 여백-왼쪽: 자동;
#bodycenter #dv1 { 부동: 왼쪽; 너비: 280px;}
#bodycenter #dv2 { 부동: 오른쪽: 410px;}
#footer{ width: 700px; margin-right: auto; Overflow: auto; }
단일 행과 3개의 열 절대 위치 지정입니다.
#왼쪽 { 위치: 절대; 위쪽: 0px; 너비: 120px }
#중간 {여백: 20px 190px 20px 190px }
#right {위치: 절대; 상단: 0px; 오른쪽: 0px 너비: 120px;}
부동 위치 지정 1
xhtml:
다음은 인용문입니다:
<div id="warp"> <div id="column"> <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{clear:both;}
float 위치 지정 2
xhtml:
다음은 인용된 부분입니다: <div id="center" class="column"> <h1>이것이 주요 내용입니다.</h1> </div> <div id="left" class="column"> <h2 >왼쪽 사이드바입니다.</h2> </div> <div id="right" class="column"> <h2>오른쪽 사이드바입니다.</h2> </div>
CSS:
다음은 인용문입니다:
본문 {여백: 0; 왼쪽 패딩: 200px; 오른쪽 패딩: 190px; 최소 너비: 240px;}
.column {위치: 상대;플로트: 왼쪽;}
#중심 {너비: 100%;}
#왼쪽 {폭: 180px; 오른쪽: 240px; 여백-왼쪽: -100%;}
#right {width: 130px;margin-right: -100%;}
행 2개와 열 3개
xhtml: 다음은 인용된 부분입니다: <div id="header">여기 맨 위 행이 있습니다</div> <div id="warp"> <div id="column"> <div id="column1"> 여기가 첫 번째 행 한 열입니다</div> <div id="column2">두 번째 열입니다</div> <div class="clear"></div> </P> <P></div > <div id= "column3">세 번째 열입니다.</div> <div class="clear"></div> </div>
CSS:
다음은 인용문입니다:
#헤더{너비:100%; 높이:자동;}
#wrap{너비:100%;자동;}
#열{ 부동:왼쪽 너비:60%;}
#열1{ 부동:왼쪽 너비:30%;}
#column2{ 부동소수점:오른쪽; 너비:30%;}
#column3{ 부동:오른쪽; 너비:40%;}
.clear{clear:both;}
행 3개와 열 3개
xhtml:
다음은 인용된 스니펫입니다. <div id="header">여기는 맨 위 행입니다.</div> <div id="warp"> <div id="column"> <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%; 높이:자동;}