如何让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>