> 웹 프론트엔드 > CSS 튜토리얼 > 순수 CSS로 동일한 높이의 부동 Div를 만드는 방법은 무엇입니까?

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

Barbara Streisand
풀어 주다: 2024-12-11 07:23:09
원래의
330명이 탐색했습니다.

How to Create Equal-Height Floating Divs with Pure CSS?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿