팁 : div를 중단하려는 이유에 따라 기본 동작이 변경되지 않는 한 인라인 수준 요소 인 태그를 사용하여 다음 행으로 넘어 가지 않는 태그 사용을 고려할 수도 있습니다.
참고 :이 예제를 사용하기 쉽고 모든 유형의 컴퓨터 사용자가 이해할 수 있도록 div의 style 속성을 사용하고 있습니다. 여러 페이지에서 이러한 예제 중 하나를 사용하려는 경우 파일에 스타일 설정이있는 캐시 가능 CSS 파일을 만드는 것이 좋습니다.
아래 예제에서 div를 다른 색상으로 표시하여 div가 차지하는 간격과 div가 배치 된 화면의 위치를 보여줍니다.
기본 동작
아래는 블록 요소 Div 의 기본 div 동작의 예입니다. 포함 요소의 첫 번째 줄을 차지하고 두 번째 Div 2가 뒤 따르는 예입니다.
하나의 사업부
Div 2
Div 1 div 2
Div 요소 의 크기를 줄여서 다른 div의 공간을 만들었더라도 블록 요소이기 때문에 Div 1 옆에 공간이 있고 Div 미만 Div 두 개가 남습니다. div를 다음 줄로 이동하려면 두 div의 인라인 블록 표시 설정이 필요합니다.
하나의 사업부
Div 2
Div 1 div 2
다음은 3 열 div의 몇 가지 다른 예입니다. 먼저 아래의 세 열 div는 div를 추가하는 것을 제외하고 위의 예와 동일한 아이디어를 따릅니다.
하나의 사업부
Div 2
Div 3
Div 1 Div 2 2 Div 3
물론 div가 포함 된 요소의 100 %를 차지하도록하려면 조금 복잡해집니다. 다음은 요소의 100 %를 차지하는 세 개의 div를 서로 옆에 만드는 방법의 한 예입니다. 아래 예제에서 인라인 블록을 사용하여 모든 div를 같은 줄에 유지하는 대신 왼쪽 및 오른쪽 div를 플로팅합니다.
하나의 사업부
Div 3
Div 2
Div One DIV THREE Div 2
팁 : 위의 세 div 열의 예가 Div 세 숨기기 및 너비 조정과 같은 추가 맞춤 설정에 반응하지만 스타일에 추가 할 수도 있습니다.