오버플로 제어를 사용하여 Div 요소를 수평으로 정렬하는 방법은 무엇입니까?

오버플로 제어를 사용하여 Div 요소 수평 정렬

CSS 레이아웃 영역에서 요소 배치 관리는 고유한 과제를 제시할 수 있습니다. 오버플로를 방지하면서 너비와 높이가 고정된 컨테이너 내에서 div를 가로로 정렬하려고 할 때 일반적인 문제 중 하나가 발생합니다.

이 문제의 근본 원인을 이해하려면 다음 시나리오를 고려하세요. Overflow:hidden이 적용된 지정된 너비와 높이입니다. 이 컨테이너 내에서 float: left div 요소의 가로 행을 생성하려고 합니다. div가 왼쪽으로 떠 있기 때문에 상위 컨테이너의 오른쪽 경계에 도달하면 자연스럽게 다음 "줄"로 이동합니다. 이는 상위 항목 내에 사용 가능한 수직 공간이 충분함에도 불구하고 발생하므로 바람직하지 않은 레이아웃이 발생합니다.

문제 해결

오버플로 없이 원하는 수평 정렬을 달성하려면 다음과 같은 영리한 기술을 사용할 수 있습니다. 컨테이너 내에 추가 내부 div를 도입하는 작업이 포함됩니다. 이 내부 div의 너비는 모든 부동 하위 div를 수용할 수 있을 만큼 커야 합니다. 다음 CSS 및 HTML 코드 조각에서는 이 기술을 보여줍니다.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

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

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div>

이 기술을 활용하면 너비가 더 넓은 가상 컨테이너를 효과적으로 생성하여 하위 div가 왼쪽으로 무한정 이동할 수 있습니다. 상위 컨테이너의 가로 경계 내. Overflow:hidden 속성은 내부 div를 숨겨서 초과 div 요소를 보기에서 숨깁니다.

이 솔루션은 div가 다음 줄로 조기에 이동하는 문제를 효과적으로 해결하여 내부 div가 깔끔하게 정렬되도록 합니다. 지정된 컨테이너.

위 내용은 오버플로 제어를 사용하여 Div 요소를 수평으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!