CSS を使用して、1 つの固定幅ともう 1 つの残りのスペースを埋める横並びの Div を実現するにはどうすればよいですか?

CSS で Div を並べて配置する

複数の div を水平方向に配置しようとすると、シームレスに配置するという課題が発生することがあります。この記事では、CSS フレックスボックスを利用して、ページ使用率を最大化する最適なレイアウトを実現するソリューションを提供します。

問題:

目的は、2 つの div を並べて配置することです。 1 つの div は 200px の固定幅を維持し、もう 1 つの div は残りの画面を動的に埋めます。 space.

解決策:

このレイアウトの鍵となるのは、項目を柔軟に配置できる強力な CSS プロパティである flexbox です。実装方法は次のとおりです:

1. 親 div を作成し、その表示プロパティを flex に設定します:

   #parent {
     display: flex;
   }

   ログイン後にコピー

2. 固定幅の div を定義し、その div を指定しますwidth:

   #narrow {
     width: 200px;
     background: lightblue; /* Just for visibility */
   }

   ログイン後にコピー

3. flex: 1 を他の div に追加します:

   #wide {
     flex: 1; /* Grows to fill remaining space */
     background: lightgreen; /* Just for visibility */
   }

   ログイン後にコピー

フレックスボックスを利用することで、divを並べて配置する動的かつ柔軟なレイアウトを作成できます。利用可能な画面スペースを最適化します。

以上がCSS を使用して、1 つの固定幅ともう 1 つの残りのスペースを埋める横並びの Div を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。