CSS만 사용하여 플로팅 Div를 동일한 높이로 만들 수 있나요?

HTML/CSS에서 부동 Div 높이 불일치 수정

웹 개발 영역에서 부동 div로 작업할 때 일반적인 문제가 발생합니다. 높이가 동일하게 정렬되도록 합니다. 이 난제는 종종 HTML 테이블을 사용하여 해결되었지만 의미론적 정확성에 대한 우려는 계속됩니다.

선호되는 솔루션은 CSS의 힘에 있습니다. 특정 스타일 조합을 구현하면 동일한 높이의 플로팅 div를 얻을 수 있습니다.

1. Overflow Hidden:overflow:hidden을 사용하여 상위 div 내에서 div를 래핑합니다. 이렇게 하면 div가 지정된 영역 내로 제한되어 경계 밖으로 확장되는 것을 방지할 수 있습니다.
2. 하단 패딩 및 음수 여백: div에 500em과 같은 넉넉한 하단 패딩을 적용합니다. 이렇게 하면 div 아래에 큰 가상 공간이 생성됩니다.
3. 음수 하단 여백: 패딩 값과 동일한 음수 여백을 추가합니다. 이렇게 하면 div가 위쪽으로 이동하여 본질적으로 패딩이 상쇄됩니다.

다음 CSS 스니펫은 이 접근 방식을 예시합니다.

#container {
  overflow: hidden;
  width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

이 기술을 사용하면 플로팅 div가 자동으로 조정되도록 할 수 있습니다. 높이가 가장 높은 콘텐츠에 맞춰 시각적 일관성을 유지합니다.

위 내용은 CSS만 사용하여 플로팅 Div를 동일한 높이로 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!