CSS を使用して 2 つの Div を並べて配置するにはどうすればよいですか?

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

2 つの隣接する div を作成することは、一般的なレイアウト要件となる場合があります。これを実現するには、次のアプローチを検討してください:

Flexbox:

このソリューションでは、flexbox はdivを調整するために採用されました水平方向:

<h1>親 {</h1><p>表示: flex;<br>}</p><h1>狭い {</h1><p>幅: 200px;<br> 背景: ライトブルー; /<em> 見えるようにするためです </em>/<br>}</p><h1>wide {</h1><p>flex: 1; /<em> コンテナの残りの部分まで成長します </em>/<br> 背景: ライトグリーン; /<em> 見えるようにするためです </em>/<br>}<br>

<div> <div id="wide">ワイド (残りの幅)</div><br> <div></div><br>

この方法では、左側の div (#narrow) に固定幅を指定し、右側の div (#wide) が自動的に占有されるようにすることができます。残りのスペースは画面幅いっぱいになります。

以上がCSS を使用して 2 つの Div を並べて配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。