CSS 레이아웃에 일반적으로 사용되는 방법: float:none|left|right
값:
없음:?기본값입니다. 물체가 뜨지 않음
왼쪽: 텍스트가 개체 오른쪽으로 흐릅니다.
오른쪽: 텍스트가 개체의 왼쪽으로 흐릅니다.
작동 방식, 1개의 행과 2개의 열의 예를 참조하세요.
XHTML 코드:
| 인용된 내용은 다음과 같습니다. <div id="줄바꿈"> <div id="column1">첫 번째 열입니다</div> <div id="column2">두 번째 열입니다</div> <div class="clear"></div> /*이는 웹 표준의 의도에 어긋나며, 아래 요소를 지워야 한다는 의미일 뿐입니다*/ </div> |
CSS 코드:
| 인용된 내용은 다음과 같습니다. #wrap{너비:100;높이:자동;} #column1{float:왼쪽;너비:40;} #column2{float:right;너비:60;} .clear{클리어:둘 다;} |
위치:정적|절대|고정|상대
값:
정적:?기본값. 특별한 위치 지정이 없으며 개체는 HTML 위치 지정 규칙을 따릅니다.
절대:? 개체를 문서 흐름 밖으로 끌어서 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 사용하여 위치 지정 설정이 가장 많은 가장 가까운 상위 개체를 기준으로 절대 위치 지정을 수행합니다. 그러한 상위 개체가 없으면 본문 개체가 사용됩니다. 그리고 그 계단식은 z-index 속성을 통해 정의됩니다.
고정:?지원되지 않습니다. 객체 위치 지정은 절대 방법을 따릅니다. 하지만 따라야 할 몇 가지 규칙이 있습니다.
상대:?객체는 쌓을 수 없지만 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 기준으로 일반 문서 흐름에서 오프셋됩니다.
1개의 행과 2개의 열의 예를 구현합니다.
XHTML 코드:
| 인용된 내용은 다음과 같습니다. <div id="줄바꿈"> <div id="column1">첫 번째 열입니다</div> <div id="column2">두 번째 열입니다</div> </div> |