如何让 Div 填充父容器中的剩余宽度？

实现动态宽度分布：填充剩余的 Div 宽度

在父 div 中处理多个 div 时，确保一个 div 填满剩余宽度的任务可以出现。此技术在创建适应不同内容大小的响应式布局时特别有用。

在您提供的 HTML 代码中，您有一个父 div (#Main) 和两个固定宽度的 div（#div1 和 #div3）以及要填充剩余空间的第三个 div (#div2)。为此，您可以采用多种方法：

浮动 Div：

<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中文网其他相关文章！