순수 CSS로 동일한 높이의 부동 Div를 만드는 방법은 무엇입니까?

HTML/CSS에서 동일한 높이의 플로팅 Div 만들기

플로팅 div로 작업할 때 두 div 사이의 높이를 동일하게 유지하는 것이 때로는 어려울 수 있습니다. div. 테이블은 간단한 솔루션이 될 수 있지만 의미상 항상 적절한 것은 아닙니다. 다행스럽게도 이를 달성할 수 있는 순수한 CSS 기술이 있습니다.

한 가지 접근 방식은 div에 하단 패딩과 음수 하단 여백을 적용하는 것입니다. 패딩은 수직 공간의 모양을 만드는 반면 여백은 이러한 패딩을 상쇄합니다. 이를 활용하여 동일한 높이의 열을 만들 수 있습니다.

또한 상위 컨테이너의 div를 Overflow: Hidden으로 래핑하면 콘텐츠가 컨테이너 외부로 오버플로되는 것을 방지할 수 있습니다. 이는 세로 정렬을 유지하는 데 도움이 됩니다.

div 내에서 텍스트를 세로로 가운데에 맞추려면 줄 높이 또는 Flexbox 기술을 사용하는 것이 좋습니다. 예를 들어 line-height를 큰 값으로 설정하거나 Flexbox를 사용하고 항목을 가운데에 정렬하면 수직 정렬을 달성하는 데 도움이 될 수 있습니다.

아래 코드 샘플은 이 기술을 보여줍니다.

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

이것은 접근 방식은 HTML/CSS에서 동일한 높이의 부동 div를 생성하는 명확하고 의미상 적절한 방법을 제공합니다.

위 내용은 순수 CSS로 동일한 높이의 부동 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!