如何讓 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中文網其他相關文章！