固定幅で 2 つの div 間でスペースを均等に分割するにはどうすればよいですか?

スペースを比例的に分割する 2 つの Div

Web ページでは、2 つの div コンテナがあり、1 つは固定幅で、もう 1 つは固定幅であるというシナリオに遭遇することがあります。残りの利用可能なスペースを占有する必要があります。この設定を効果的に構成することは、レスポンシブ レイアウト デザインにとって不可欠です。

これを実現するには、さまざまな CSS テクニックを利用できます。一般的に使用される 2 つの方法を次に示します。

方法 1: 幅のプロパティを設定する

固定幅 div に特定の幅を設定し、calc() 関数を使用して計算します。他の div の幅もそれに応じて変化します。 calc() 関数の値には、固定幅の div の幅、マージンまたはパディング、残りのスペースの必要な割合が考慮されていることを確認してください。

方法 2: Display:table を使用するおよび Display:table-cell

display: table プロパティと display: table-cell プロパティを利用して、表のようなレイアウトを作成します。固定幅 div の width プロパティを設定し、パーセント値を指定して他の div の幅を調整します。パーセンテージ値によって、占有すべき残りのスペースの割合が決まります。

コード例:

以下の HTML および CSS コード サンプルを参照してください。ここで、右の div は(クラスが右側の場合) は 250px の固定幅で、左側の div (クラスが左側の場合) は残りのスペースを占めます。

HTML:

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

CSS:

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

.right {
  float: right;
  width: 250px;
  min-height: 50px;
  margin-left: 10px;
  border: 2px dashed #00f;
}</code>

これらのテクニックを利用すると、2 つの div コンテナ間のスペースを効果的に分割でき、柔軟で応答性の高い Web レイアウトを作成できるようになります。

以上が固定幅で 2 つの div 間でスペースを均等に分割するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。