집 >웹 프론트엔드 >CSS 튜토리얼 >브라우저 창 크기를 조정할 때 외부 Div가 축소되는 이유는 무엇입니까?

브라우저 창 크기를 조정할 때 외부 Div가 축소되는 이유는 무엇입니까?

Why Does My Outer Div Collapse When Resizing the Browser Window?

왜 외부

내부

를 완전히 둘러싸세요. 크기를 조정할 때는?

내부 및 외부

가 있는 컨테이너에서 외부

예기치 않게 내부

의 콘텐츠보다 작은 너비로 축소됩니다. 이 문제는 블록 요소의 특성으로 인해 발생할 수 있습니다.

블록 요소는 일반적으로 상위 컨테이너만큼의 너비를 차지합니다. 창의 크기가 더 좁은 너비로 조정되면 외부

처음에는 내부

의 콘텐츠를 수용하도록 확장됩니다. 그러나 창 너비가 더 줄어들면 외부

의 너비는 결국 내부

의 너비보다 작아집니다.

이 문제를 해결하려면 inline-block과 min의 조합을 사용하세요. -폭: 100% 사용 가능합니다. inline-block을 사용하면 요소가 인라인 요소와 블록 요소로 모두 작동할 수 있습니다. min-width:100%를 설정하면 외부

너비가 항상 콘텐츠 너비와 적어도 같도록 보장합니다.

업데이트된 코드

display: inline-block 및 min-width: 100%를 추가하여 외부

, 내부

외부

창 크기를 조정할 때 콘텐츠 너비보다 작게 줄어들지 않도록 합니다.

.demo {
  display: inline-block;
  min-width: 100%;
}

위 내용은 브라우저 창 크기를 조정할 때 외부 Div가 축소되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：