1 つの固定幅 Div と 1 つの可変幅 Div を含むレイアウトを作成するにはどうすればよいですか?

可変幅分布の Div

Web 開発では、2 つの div が利用可能なスペースを共有するレイアウトを作成すると便利なことがよくありますが、1 つの div は使用可能なスペースを共有します。 div の幅は固定されています。

質問:

一方の div が固定幅を維持し、もう一方が残りのスペースを占有するように div の幅を調整するにはどうすればよいですか?

解決策:

これを実現するには、次の手順に従います。

1. HTML 構造:

<code class="html"><div class="right"></div>
<div class="left"></div></code>

2. CSS:

固定幅右 Div の場合:

<code class="css">.right {
    float: right;
    width: 250px;  // Set your desired fixed width
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}</code>

可変幅左 Div の場合:

<code class="css">.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}</code>

3.追加メモ:

• ブラウザ間の互換性を向上させるために、float の代わりに display: table を使用することもできます。
• 特定の要件に基づいて .right の width プロパティを調整します。 .
• このアプローチにより、固定幅の div は変更されず、可変幅の div は残りのスペースを埋めるように調整されます。

以上が1 つの固定幅 Div と 1 つの可変幅 Div を含むレイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。