순수 CSS로 동일한 높이의 열을 얻는 방법은 무엇입니까?

순수한 CSS를 사용하여 진정한 동일 높이 열을 만드는 방법

콘텐츠 길이가 다양한 여러 열로 작업할 때 배경 이미지를 사용하지 않고 동일한 높이를 달성하는 것이 일반적일 수 있습니다. 도전. 광범위한 연구 끝에 우리는 이 문제를 효과적으로 해결하는 고유한 CSS 솔루션을 개발했습니다.

솔루션

수직 공간을 효과적으로 분배하는 단순화된 접근 방식을 위해 다음 속성을 사용하는 것이 좋습니다.

.parent {
  display: table;
}

.child {
  display: table-cell;
}

이 방법은 상위 컨테이너와 하위 컨테이너에 테이블과 같은 구조를 할당하여 동일한 수직 공간을 차지하도록 합니다.

호환성

이 솔루션에 유의하는 것이 중요합니다. Internet Explorer 7과 호환되지 않습니다. IE7에 대한 지원이 중요한 경우 더 복잡한 접근 방식이 필요할 수 있습니다.

예

<div class="parent">
  <div class="child">Column 1</div>
  <div class="child">Column 2 with longer content</div>
  <div class="child">Column 3</div>
</div>

이 예에서는 세 열 모두 동일합니다. 높이는 각 열의 내용 길이에 관계없이 적용됩니다.

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