>  기사  >  웹 프론트엔드  >  Overflow:hidden이 있어도 플로팅된 Div가 수직으로 쌓이는 이유는 무엇입니까?

Overflow:hidden이 있어도 플로팅된 Div가 수직으로 쌓이는 이유는 무엇입니까?

DDD
DDD원래의
2024-11-13 14:43:02401검색

Why Do Floated Divs Stack Vertically Even with Overflow:hidden?

플로팅된 Div의 수평 정렬

overflow:hidden이 있는 컨테이너 내에서 div가 왼쪽으로 플로팅되는 경우, 다음과 같은 경우에도 수직으로 쌓일 수 있습니다. 수평으로 공간이 충분합니다. 올바르게 정렬되도록 하려면 다음 해결책을 고려하십시오.

해결책:

모든 플로팅된 항목을 수용할 수 있을 정도로 너비가 더 넓은 내부 div를 컨테이너 내에 생성합니다. divs.

#container {
  width: 200px;
  overflow: hidden;
}

#inner {
  width: 2000px;
  overflow: hidden;
}

.child {
  float: left;
  width: 50px;
  height: 50px;
}
<div>

내부 div에 충분한 너비를 제공하면 플로팅된 div가 의도한 대로 컨테이너 내에서 가로로 정렬됩니다.

위 내용은 Overflow:hidden이 있어도 플로팅된 Div가 수직으로 쌓이는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.