CSS에서 부동 요소를 사용하여 동일한 높이 열을 어떻게 만들 수 있습니까?

플로팅 요소가 있는 동일한 높이 열 생성

두 개의 하위 div가 포함된 상위 div가 포함된 페이지 레이아웃에서 하위 div 중 하나는 콘텐츠가 더 많아지면 상위 div의 높이가 확장됩니다. 그러나 다른 하위 div는 그에 따라 높이를 조정할 수 없습니다. 이 문제는 특정 CSS 속성을 적용하여 해결할 수 있습니다.

두 하위 div의 높이를 동일하게 하려면:

1. 상위 요소:

   • 오버플로 추가: 콘텐츠가 외부로 쏟아지는 것을 방지하기 위해 숨김 parent.
   • 위치 설정: 다음 하위 항목의 절대 위치 지정에 대해 상대적입니다.
   • 상위 항목이 사용 가능한 전체 너비에 걸쳐 있는지 확인하려면 width: 100%를 사용하세요.

2. .child-right 요소:

   • 시각적 분석을 위해 고유한 색상을 지정합니다(예: 배경: 녹색).
   • 높이가 상위 항목과 일치하도록 높이: 100%를 설정합니다.
   • width: 50%를 사용하여 너비를 상위 너비의 절반으로 설정합니다.
   • 추가 위치: 상위 항목 내의 절대 위치 지정에 대한 절대값.
   • 오른쪽 설정: 0으로 설정하면 상위 항목의 오른쪽 가장자리와 같은 높이로 배치됩니다.
   • 위쪽 설정: 0으로 설정하면 위쪽 가장자리와 같은 높이로 위치합니다.

이러한 CSS 속성을 적용하면 두 하위 div의 높이가 동일해집니다. 시각적으로 균형잡힌 레이아웃.

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