오버플로: 숨김을 사용하여 중첩된 Div에서 가변 너비 분포를 달성하는 방법은 무엇입니까?

중첩된 Div에서 가변 너비 분포를 달성하는 방법

xHTML/CSS에서는 여러 개의 중첩된 div가 필요한 시나리오를 접하는 것이 일반적입니다. 콘텐츠에 따라 다양한 너비를 갖는 내부 div를 사용하여 가로로 정렬합니다. 이 질문은 너비가 지정되지 않고 콘텐츠에 따라 달라지는 경우 내부 div 중 하나에 남은 사용 가능한 가로 공간을 할당하는 방법에 대한 일반적인 과제를 탐구합니다.

이 효과를 얻으려면 CSS 속성을 활용할 수 있습니다. "오버플로: 숨김;". 이 속성은 플로팅 요소에 인접한 요소가 플로트 뒤로 확장되어 제어된 레이아웃을 생성하는 것을 방지합니다.

아래 HTML 구조를 고려하세요.

<div>

레이아웃을 구성하려면 다음 CSS를 사용할 수 있습니다. 적용:

#outer {
    overflow: hidden;
    width: 100%;
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;
    border: solid 3px #00c;
    background: #ddf;
}

"오버플로: 숨김;" 설정으로 "외부" div에서는 부동 "inner1" div가 "외부" div 내에 포함되도록 강제합니다. 그런 다음 "inner2" div가 나머지 가로 공간을 채웁니다.

이 레이아웃이 이전 버전의 Internet Explorer(IE 6 및 7)에서 작동하도록 하려면 HTML 조건부 주석과 함께 다음 추가 CSS를 사용할 수 있습니다.

<!--[if lte IE 6]>
<style type="text/css">
    #inner2 {
        zoom: 1;
    }

    #inner1 {
        margin-right: -3px;
    }
</style>
<![endif]-->

이 스타일을 사용하면 IE 6에서 "inner2" div가 남은 공간을 올바르게 채우고 "inner1" div의 여백을 조정하여 "zoom" 속성으로 인한 간격을 보완할 수 있습니다.

이 구성을 사용하면 "inner1" div는 콘텐츠에 따라 너비를 동적으로 조정하고 "inner2" div는 사용 가능한 나머지 너비를 차지하여 div가 해당 너비에 따라 가로로 정렬되는 레이아웃을 만듭니다.

위 내용은 오버플로: 숨김을 사용하여 중첩된 Div에서 가변 너비 분포를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!