고정 크기 컨테이너 내에서 부동 Div를 수평으로 정렬하려면 어떻게 해야 합니까?

플로팅 div를 가로로 정렬

크기가 고정되고 오버플로가 숨겨진 컨테이너 div로 작업할 때 플로팅 div를 가로로 정렬하는 것이 어려울 수 있습니다. 기본적으로 플로팅된 div는 위에 사용 가능한 공간이 있더라도 부모의 오른쪽 경계에 도달하면 다음 줄로 줄 바꿈됩니다.

원하는 모양

원하는 모양은 div의 가로 행입니다. 컨테이너 내에서 여러 줄로 묶이는 것을 방지합니다. 공백이 있는 인라인 요소: no-wrap을 사용하면 이를 달성할 수 있지만 부동 블록 수준 요소에는 적합하지 않습니다.

해결책

이 문제를 해결하려면 플로팅된 모든 div를 수용할 수 있을 만큼 충분한 너비를 가진 컨테이너입니다. 컨테이너와 내부 div 모두 오버플로 속성을 숨김으로 설정하면 div가 지정된 영역 밖으로 쏟아지는 것을 방지할 수 있습니다.

예제 코드

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

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

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

위 내용은 고정 크기 컨테이너 내에서 부동 Div를 수평으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!