HTML에서 DIV가 서로 겹치는 경우 수행할 작업-HTML 튜토리얼-php.cn

HTML에서 DIV가 서로 겹치는 경우 수행할 작업

php中世界最好的语言

풀어 주다： 2017-11-23 18:12:09

원래의

21313명이 탐색했습니다.

웹페이지를 만들 때, 즉 DIV가 DIV를 덮어서 DIV박스가 겹쳐서 내용이 나오지 않는 문제가 자주 발견되는데, 오늘은 그 원인과 해결방법을 소개해드리겠습니다.

하위 DIV의 내용이 상위 DIV의 내용과 겹쳐지는 레이아웃을 접하셨을 수도 있습니다. 따라서 DIV가 겹치는 현상이 발생할 수도 있습니다. 및 DIV. 두 개의 인접한 DIV 상자가 겹쳐서 나타나는 경우도 있습니다. 이러한 문제는 무엇이며 해결 방법은 무엇입니까?

다음으로, 두 가지 유형의 호환성 간에 DIV 적용 범위가 겹치는 문제를 사례를 통해 보여주고 그 이유와 해결 방법을 설명하겠습니다.

상하 구조 DIV 박스 커버리지 먼저, 예제 HTML 코드를 사용해보세요

<!DOCTYPE html> 
<html> 
<head> 
<title>DIV与DIV覆盖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa,.boxb{ margin:0 auto; width:400px;} 
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
.boxb{ border:1px solid #000; height:40px; background:#999} 
</style> 
</head> 
<body> 
<div class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

로그인 후 복사

코드를 복사해서 DIV 커버리지 현상을 직접 발견해 보실 수 있습니다.

예제 코드 설명:

CSS 이름이 각각 ".boxa" 및 ".boxb"인 두 개의 큰 div 상자를 설정합니다. 너비를 동일한 400px로 설정하고 "에 대한 배경을 설정합니다. .boxb" 검은색입니다. 그런 다음 boxa에 두 개의 작은 상자(왼쪽과 오른쪽에 하나씩)를 추가합니다. CSS 이름은 ".boxa-l" 및 ".boxa-r"입니다. 동시에 빨간색 테두리, CSS 높이를 각각 280px 및 100px로 설정합니다.

문제 분석

일반적으로 ".boxa"와 ".boxb"를 하향식 구조로 레이아웃하는 것이 필요합니다. 위 그림을 보면 브라우저에서 나타나는 효과는 두 가지에 있는 콘텐츠입니다. 상자는 하향식 구조 효과를 달성하지만 ". DIV "boxb"는 ".boxa" 아래로 갔지만 내용은 덮어쓰이지 않고 DIV만 덮어썼습니다.

이러한 이유는 첫 번째 큰 상자에 있는 자식이 float 속성을 사용하여 부동하기 때문입니다. ".boxa"는 열리지 않으며, 같은 레벨의 ".boxb" 상자는 ".boxa"와 밀접하게 다릅니다. 첨부되었지만 ".boxa"에는 높이가 없습니다. ".boxa"의 하위 항목은 부동 상태이며 ".boxb" 상자는 여전히 ".boxa"에 높이가 없다고 생각합니다. so ".boxb" "DIV 상자가 ".boxa" 하위 레벨 DIV 상자 아래에서 실행되어 중첩 현상이 발생했습니다.

문제 해결 방법

float를 지우거나 또는 ".boxa" 높이를 설정하십시오. 일반적으로 텍스트 내용이 불확실한 경우 텍스트 내용을 고정 높이로 설정할 수 없으므로 일반적으로 ".boxa" 높이는 설정할 수 없습니다(물론 콘텐츠의 높이를 결정할 수 있습니다. 이 경우 ".boxa"는 적용 범위 문제를 해결하기 위해 높이를 설정할 수 있습니다).

여기서는 CSS 클리어 플로트(clear float) 방법을 사용하여 상부 및 하부 구조 DIV의 중첩 적용 범위 문제를 해결합니다. 플로트를 클리어하는 방법에는 두 가지가 있으며 그 방법은 다음과 같습니다.

css 클리어는 플로트를 지웁니다

".boxa" 상자

<!DOCTYPE html> <html> <head> <title>DIV与DIV覆盖</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .boxa,.boxb{ margin:0 auto; width:400px;} .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} .boxb{ border:1px solid #000; height:40px; background:#999} .clear{ clear:both} </style> </head> <body> <div class="boxa"> <div class="boxa-l">内容左</div> <div class="boxa-r">内容右</div> <div class="clear"></div> </div> <div class="boxb">boxb盒子里的内容</div> </body> </html>

<!DOCTYPE html> <html> <head> <title>DIV与DIV覆盖</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .boxa{ overflow:hidden} .boxa,.boxb{ margin:0 auto; width:400px;} .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} .boxb{ border:1px solid #000; height:40px; background:#999} </style> </head> <body> <div class="boxa"> <div class="boxa-l">内容左</div> <div class="boxa-r">内容右</div> </div> <div class="boxb">boxb盒子里的内容</div> </body> </html>

위 내용은 HTML에서 DIV가 서로 겹치는 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!