CSS를 사용하여 동일한 높이 열을 어떻게 만들 수 있나요?

CSS

코드에서 테이블 레이아웃을 사용하여 동일한 높이의 기둥. 그러나 각 열의 너비는 총 열 수에 따라 결정되므로 이 기술은 백분율에는 작동하지 않습니다.

Flexbox 솔루션

동일한 높이를 얻으려면 열에는 flexbox를 사용할 수 있습니다. 예는 다음과 같습니다.

ul {
  display: flex; /* Makes the list items align horizontally */
  align-items: stretch; /* Stretches the list items to full height */
}

이렇게 하면

내의 모든 목록 항목에 대해 동일한 높이의 열이 생성됩니다.

참고:

• Flexbox는 Flex 컨테이너의 직계 하위 항목에서만 작동합니다(이 경우 < ;ul>).
• 플렉스 항목에 높이를 적용하면 동일한 높이가 무시됩니다. 기능.
• 동일 높이 열은 같은 줄의 항목에만 적용됩니다.

브라우저 지원

Flexbox는 다음에서 광범위하게 지원됩니다. 버전 10 이하의 IE를 제외한 최신 브라우저. 호환성을 보장하려면 이전 버전에 대한 공급업체 접두사 사용을 고려하세요. 브라우저.

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