웹 페이지 레이아웃의 남은 공간을 Div가 동적으로 채우도록 만드는 방법은 무엇입니까?

유연성 균형 유지: 남은 너비 할당 나누기

웹 개발 영역에서 최적의 페이지 레이아웃을 얻으려면 요소를 원활하게 정렬해야 하는 경우가 많습니다. 컨테이너 내의 나머지 공간을 div가 동적으로 채우도록 노력할 때 이러한 문제 중 하나가 발생합니다. 이 작업을 효과적으로 처리하려면 다음 예를 고려하십시오.

<div>
<p>이 레이아웃 내에서 우리의 목표는 div2를 조정하여 사용 가능한 나머지 너비를 차지하는 것입니다. 이를 달성하려면 다음 코드를 활용하세요.</p>
<pre class="brush:php;toolbar:false"><style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div><p>하위 div에 적절한 너비, 부동 소수점 및 여백 값을 할당함으로써 div2는 남은 공간을 원활하게 차지하도록 동적으로 조정합니다. 적절한 렌더링을 위해서는 HTML 마크업에서 "가운데 div"가 "오른쪽 div" 뒤에 위치해야 합니다.</p></div>