親コンテナーで Div Fill の残りの幅を作成するにはどうすればよいですか?

動的な幅配分の実現: 残りの Div 幅を埋める

親 div 内で複数の div を操作する場合、1 つの div が残りの幅を埋めるタスクを実行できます。起きます。このテクニックは、さまざまなコンテンツ サイズに対応するレスポンシブ レイアウトを作成する場合に特に役立ちます。

提供された HTML コードには、固定幅の 2 つの div (#div1 と #div3) を持つ親 div (#Main) があります。そして残りのスペースを埋める 3 番目の div (#div2) です。これを実現するには、次のようないくつかの方法を使用できます。

Floating 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 Layout:

<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 Fill の残りの幅を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。