상위 컨테이너에서 Div 채우기 남은 너비를 만드는 방법은 무엇입니까?

동적 너비 분포 달성: 남은 Div 너비 채우기

상위 div 내에서 여러 div로 작업할 때 하나의 div가 나머지 너비를 채우도록 하는 작업은 다음과 같습니다. 생기다. 이 기술은 다양한 콘텐츠 크기를 수용하는 반응형 레이아웃을 만드는 데 특히 유용할 수 있습니다.

제공된 HTML 코드에는 고정 너비의 두 div(#div1 및 #div3)가 있는 상위 div(#Main)가 있습니다. 나머지 공간을 채우려는 세 번째 div(#div2)입니다. 이를 수행하려면 다음과 같은 여러 가지 방법을 사용할 수 있습니다.

Floating Divs:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; }
    #middle-div { float: left; width: calc(100% - 200px); }
    #right-div { width: 100px; float: right; }
</style>

Flexbox 레이아웃:

<style>
    #divMain { 
        display: flex;
        width: 500px; 
    }
    #left-div { width: 100px; }
    #middle-div { flex-grow: 1; }
    #right-div { width: 100px; }
</style>

그리드 레이아웃:

<style>
    #divMain { 
        display: grid;
        grid-template-columns: 100px auto 100px; 
    }
</style>

위 내용은 상위 컨테이너에서 Div 채우기 남은 너비를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!