固定幅と柔軟な幅を使用して 2 つの要素間で画面の幅を分割するにはどうすればよいですか?

2 つの要素間で画面の幅を分割する

Web デザインでは、画面の幅を 2 ​​つの div に分割する必要がある場合があります。 1 つは固定幅を持ち、もう 1 つは残りのスペースを占めます。これを実現する方法は次のとおりです:

パーセントベースの幅で Float を使用する:

このアプローチでは、CSS の float プロパティを使用して div を並べて配置します。

.left {
    float: left;
    width: 83%;
}

.right {
    float: right;
    width: 17%;
}

div が親コンテナの幅全体を確実に埋めるために、幅の合計が 100% になることに注意してください。

Flexbox の使用:

フレックスボックスは、柔軟な寸法を使用して要素のサイズと位置を制御できる、より多用途なレイアウト システムです。

.container {
    display: flex;
}

.left {
    flex: 1;
}

.right {
    width: 250px;
}

この例では、「.container」 div がフレックスボックスとして表示されるように設定されています。また、「.left」 div には 1 のフレックス拡張係数が与えられ、固定幅の「.right」 div の後の残りのスペースを埋めるために拡張できます。

Using Display Table :

display: table を使用して、最初の列が固定幅で 2 番目の列が残りのスペースを占める 2 列のレイアウトを作成することもできます。

.left {
    display: table-cell;
    width: 250px;
}

.right {
    display: table-cell;
}

以上が固定幅と柔軟な幅を使用して 2 つの要素間で画面の幅を分割するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。