2 つの Div を並べて配置し、一方の Div を固定幅にし、もう一方の Div を拡張して残りのスペースを埋めるにはどうすればよいですか?-CSSチュートリアル-php.cn

2 つの Div を並べて配置し、一方の Div を固定幅にし、もう一方の Div を拡張して残りのスペースを埋めるにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-20 08:29:10

オリジナル

870 人が閲覧しました

How Can I Position Two Divs Side-by-Side with One Div Having a Fixed Width and the Other Expanding to Fill the Remaining Space?

CSS で 2 つの Div を並べて配置する

HTML と CSS を使用する場合、要素を互いに隣り合わせて配置する必要がありますが一般的です。この記事では、特定のシナリオについて詳しく説明します。目的は、水平方向に隣接する 2 つの div を作成し、1 つの div を特定の幅に制限し、もう 1 つの div が残りの利用可能なスペースを占有することです。

Flexbox ソリューション

最新のブラウザは、フレックスボックスと呼ばれる CSS プロパティをサポートしています。これは、要素を柔軟な方法でレイアウトするための強力な方法を提供します。目的のレイアウトを実現するには、フレックスボックスの使用を検討してください。このアプローチを示すコードスニペットを次に示します。

<div>

ログイン後にコピー

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

ログイン後にコピー

この例では:

#parent は、フレックスボックスレイアウトを設定する含まれる div です。
#narrow の幅は 200px に固定されています。
#wide は拡大するように設定されていますflex: 1 プロパティにより、画面上の残りの利用可能なスペースを占有します。

フレックスボックスを利用すると、複雑な幅の計算や追加の必要がなく、簡単に並べて div を作成できます。 CSS ルール。このソリューションは簡潔かつ柔軟であるため、さまざまなシナリオに適しています。

以上が2 つの Div を並べて配置し、一方の Div を固定幅にし、もう一方の Div を拡張して残りのスペースを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。