CSS만 사용하여 두 개의 플로팅 Div를 같은 높이로 만들 수 있나요?

HTML/CSS에서 두 개의 플로팅 Div를 같은 높이로 만들기

소개

균등 달성 div의 높이는 어려울 수 있습니다. 특히 나란히 있고 콘텐츠가 다른 경우에는 더욱 그렇습니다. 길이. 일반적인 해결 방법 중 하나는 테이블을 사용하는 것이지만 이 접근 방식은 의미상 적합하지 않을 수 있습니다.

CSS를 사용하여 동일한 높이 Div 생성

테이블을 사용하지 않고 동일한 높이를 얻으려면 CSS를 사용하세요. 여러 가지 기술을 제공합니다. 한 가지 접근 방식은 큰 하단 패딩을 설정하고, 음수 하단 여백으로 해당 패딩을 무효화하고, 숨겨진 오버플로가 있는 컨테이너로 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; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

HTML에서 div 컨테이너와 두 개의 하위 항목을 만듭니다. divs:

<div>

이 접근 방식은 본질적으로 두 div에 포함된 콘텐츠 양이 다르더라도 두 div의 높이를 동일하게 만듭니다. 큰 하단 패딩과 음수 여백은 서로를 상쇄하므로 div가 필요한 수직 공간만 차지할 수 있습니다. 오버플로가 숨겨진 컨테이너는 초과 콘텐츠가 표시되지 않도록 보장합니다.

결론

이 CSS 기술은 HTML/에서 동일한 높이 부동 div를 생성하는 의미상 올바른 방법을 제공합니다. CSS. 불필요한 마크업을 도입하지 않고 테이블의 동작을 효과적으로 모방합니다.

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