親コンテナーで Div Fill の残りの幅を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-02 01:57:13

オリジナル

633 人が閲覧しました

How to Make a Div Fill Remaining Width in a Parent Container?

動的な幅配分の実現: 残りの 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 サイトの他の関連記事を参照してください。