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

집

웹 프론트엔드

HTML 튜토리얼

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

php中世界最好的语言

Nov 23, 2017 pm 06:12 PM

divhtml

웹페이지를 만들 때, 즉 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" 상자가 닫히기 전에 플로트를 지우려면 클리어 스타일을 추가하세요.

완전한 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} 
.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>

이 방법은 이전 방법보다 더 간단하고 간단합니다. ".boxa"(부동 하위 항목이 있는 상위 상자)에

overflow:hidden을 추가하기만 하면 됩니다.

CSS DIV 예제 코드는 다음과 같습니다.

<!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>

DIV 적용 범위 문제는 모두에게 해결됩니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 기사

HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.May 01, 2025 am 12:01 AM

일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.

Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Apr 30, 2025 pm 03:24 PM

솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...

DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?Apr 30, 2025 pm 03:21 PM

마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...

HTML 비디오의 재생 제어 스타일 수정 방법Apr 30, 2025 pm 03:18 PM

HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.

휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?Apr 30, 2025 pm 03:15 PM

휴대 전화에서 기본 선택을 사용하는 데있어 잠재적 인 문제는 모바일 애플리케이션을 개발할 때 종종 상자를 선택해야 할 필요가 있습니다. 일반적으로 개발자 ...

휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?Apr 30, 2025 pm 03:12 PM

휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까? 모바일 장치에서 애플리케이션을 개발할 때는 올바른 UI 구성 요소를 선택하는 것이 매우 중요합니다. 많은 개발자 ...

Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?Apr 30, 2025 pm 03:09 PM

Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하십시오. 3.js의 Octree를 사용하여 방에서 3 인칭 로밍을 구현하고 충돌을 추가하십시오 ...

휴대 전화에서 기본 선택을 사용할 때 어떤 문제가 발생합니까?Apr 30, 2025 pm 03:06 PM

모바일 장치에서 애플리케이션을 개발할 때 휴대폰에 대한 기본 선택 문제는 종종 사용자가 선택 해야하는 시나리오에 직면합니다. 네이티브 셀 ...

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.