如何讓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 可以動態適應以無縫地佔據剩餘空間。請注意，為了正確渲染，「中間 div」應位於 HTML 標籤中「右 div」之後。 </p></div>