Floated Div를 상위 Div 높이까지 확장하려면 어떻게 해야 합니까?

상위 항목과 일치하도록 부동 Div 높이 확장

부동 하위 요소는 상위 컨테이너의 수직 정렬을 방해할 수 있습니다. 이 문제를 해결하고 부동 하위 div의 높이가 상위 div와 일치하도록 확장되도록 하려면 다음 단계를 따르세요.

1. 상위 속성 설정:

다음 CSS 속성을 상위 요소에 추가합니다.

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

• overflow: hided 하위 요소가 상위 컨테이너 외부로 오버플로되는 것을 방지합니다.
• 위치: 상대는 하위 요소에 대한 상대 위치 지정 컨텍스트를 설정합니다.
• 너비: 100% 상위 div가 컨테이너의 전체 너비를 차지하도록 합니다.

2. 부동 하위 구성:

부동 하위 div(예: .child-right)의 경우 다음 CSS 속성을 적용합니다.

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

• 배경: 녹색은 가시성을 위한 녹색 배경색입니다.
• height: 100%는 하위 div의 높이를 해당 div의 높이와 일치하도록 설정합니다. parent.
• width: 50%는 하위 div의 너비를 상위 너비의 절반으로 정의합니다.
• position:absolute는 일반 문서 흐름에서 하위 div를 제거하고 상위 div 내에 절대 위치를 지정합니다. 컨테이너.
• right: 0은 하위 div를 상위 div의 오른쪽 가장자리에 정렬합니다.
• top: 0은 정렬합니다. 하위 div를 상위 div의 상단 가장자리에 배치합니다.

이러한 CSS 속성을 구현하면 부동 하위 div의 높이가 상위 div의 높이와 일치하도록 자동으로 확장되어 수직 정렬 레이아웃이 보장됩니다.

위 내용은 Floated Div를 상위 Div 높이까지 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!