웹 사이트가 있지만 div 상자가 바로 정렬되어 있지 않습니다. 이것은 여러 가지 이유로 발생할 수 있습니다. 특히 한 웹 사이트에서 다른 웹 사이트로 이동하는 div의 위치 문제를 고려할 때 특히 그렇습니다. 유사하게, 박스 요소는 포지셔닝 오류에서 오버 플로우 문제 및 간단한 플로트 문제에 이르기까지 몇 가지 이유로 오버랩 될 수 있습니다. 대부분의 경우 웹 사이트의 스타일 시트를 빠르고 쉽게 변경하여 문제를 해결할 수 있습니다.

1.

상자에 현재 여백이없고 소량 만 중복되는 경우 여백을 추가하십시오. 여백 요소를 사용하여 다른 상자 요소를 멀리두고 싶을 때 왼쪽과 같이 한쪽에만 여백을 설정할 수 있습니다. 예를 들어, div A와 div B가 서로 옆에 배치되고 div B가 왼쪽에 겹치면 스타일 시트를 수정하여 다음과 같이 div A에 왼쪽 여백을 추가 할 수 있습니다.

a {너비 : 100px; margin-left : 10px; }

2.

스타일 시트에서 중첩을 일으킬 수있는 위치 값을 검색하고 변경하십시오. 절대 위치 지정을 사용하여 웹 사이트의 div 요소를 정렬하면 모든 요소가 페이지의 다른 요소와 겹칠 수 있습니다. 따라서 div A를 페이지의 위쪽과 왼쪽에서 100 픽셀 너비와 15 픽셀로 설정하면 div B는 div A와 겹치지 않게 왼쪽에서 최소 115 픽셀이되어야합니다. 위 또는 아래, 오른쪽 또는 왼쪽에서.

삼.

특정 너비로 ​​div를 설정하고 오버플로를 숨 깁니다. 이렇게하면 div가 지정된 크기를 초과하는 것을 방지하고 말하기 위해 내용이 넘치지 않도록합니다. 예를 들어 div A에 설정된 너비가없고 큰 이미지를 넣으면 div가 자동으로 확장되어 이미지를 수용합니다. 너비를 설정하면 이미지가 여전히 div 가장자리를 넘어 표시되지만 div는 확장되지 않습니다. 오버플로를 숨기면 이미지는 div 경계 내에서만 표시되며 요소를 확장하지 않습니다. 예를 들어 div A를 200 픽셀 너비로 설정하고 오버플로하지 않으려면 다음 스타일 코드를 사용합니다.

a {너비 : 200px; 오버플로 : 숨김; }

4.

"float"옵션을 사용하면 div 상자를 자동으로 스택으로 정렬 할 수 있습니다. 예를 들어, div A가 사이드 바의 역할을하고 div가 콘텐츠를 보유하도록하려면 div를 왼쪽으로 떠서 수평으로 정렬 할 수 있습니다. 플로팅 div 요소는 겹치지 않습니다. 두 개의 떠 다니는 요소의 예는 다음과 같습니다.

a {너비 : 150px; 왼쪽으로 뜨다; }

b {너비 : 400px; 왼쪽으로 뜨다; }

팁

• Firefox를 사용하는 경우 상자를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택할 수 있습니다. 이렇게하면 각 요소에 대한 시각적 인 개요를 얻을 수 있습니다.이 요소를 사용하면 특히 까다로운 문제를 정확히 찾아 낼 수 있습니다.
• "overflow-x"또는 "overflow-y"를 사용하여 x 또는 y 축에서만 숨기기 위해 오버플로를 설정할 수 있습니다.