두 개의 부동 하위 DIV를 동일한 높이로 만들려면 어떻게 해야 합니까?

플로팅된 하위 DIV의 높이 동일화

문제:

페이지 레이아웃에서 두 개의 부동 하위 DIV를 포함하는 상위 DIV, 첫 번째 하위 DIV만 높이를 다음으로 확장합니다. 콘텐츠가 증가하면 부모의 높이를 일치시킵니다. 두 번째 하위 DIV는 기본 높이로 유지되어 모양이 고르지 않게 됩니다.

해결책:

두 번째 하위 DIV(.child-right)가 부모와 동일한 높이, 다음 CSS를 부모 .parent 및 자식 .child-right에 적용합니다. 요소:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

설명:

• 오버플로: 상위 요소에 숨김을 설정하면 하위 DIV의 콘텐츠가 상위 요소의 경계를 넘나드는 것을 방지할 수 있습니다.
• 상위 요소의 위치를 ​​상대적으로 지정하면 하위 DIV가 해당 요소 내에서 절대 위치 지정을 사용할 수 있습니다. 프레임.
• 상위 요소에서 width: 100%를 설정하면 컨테이너의 전체 너비를 차지하게 됩니다.
• 하위 DIV의 경우 height: 100%를 설정하면 높이까지 확장됩니다.
• width: 50%는 상위 요소의 절반을 차지하도록 보장합니다. width.
• right: 0 및 top: 0을 사용하여 절대 위치 지정은 하위 DIV를 오른쪽 가장자리에 맞춰 정렬된 상위 오른쪽 상단에 배치합니다.

이를 사용하여 CSS 속성을 조합하면 부동 하위 DIV가 상위 DIV의 높이와 일치하도록 확장되어 두 하위 DIV 간에 높이가 동일하게 분배됩니다.

위 내용은 두 개의 부동 하위 DIV를 동일한 높이로 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!