하나의 Div가 남은 공간을 차지하도록 Div를 두 부분으로 나누는 방법은 무엇입니까?

XHTML/CSS에서 Div를 사용하여 완벽한 수평 분할을 달성하는 방법

너비가 100%인 외부 div 내부에 중첩된 div가 있습니다. 중첩된 div의 너비를 두 부분으로 분할하여 한 div가 다른 div 다음에 나머지 공간을 차지하려고 합니다. 문제는 첫 번째 div의 너비를 지정하고 싶지 않다는 것입니다. 크기는 내용에 따라 다르기 때문입니다.

The Magic of Hidden Overflow

The Magic of Hidden Overflow

해결책은 Overflow: Hidden;을 사용하는 것입니다. 이 CSS 속성은 부동 요소에 인접한 요소가 부동 요소의 경계를 넘어 확장되는 것을 방지합니다.

HTML 구조

<div>

다음과 같이 HTML을 조정하고 # 문자를 적절한 ID로 바꿉니다.

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;
}

다음 CSS를 구현합니다.

IE 6 지원

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

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

IE 6 지원을 위한 선택적 CSS(필요한 경우):

결과

이러한 변경으로 #inner2는 나머지 수평 공간을 차지하여 중첩된 div 간에 사용 가능한 너비를 깔끔하고 동적으로 분할합니다.

위 내용은 하나의 Div가 남은 공간을 차지하도록 Div를 두 부분으로 나누는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!