Box2が除外された後、Box1を残りのスペースに埋める方法は？ または： Box1は残りのスペースをどのように満たし、Box2で占有されているエリアを除外しますか？

Box2を除外した後、Box1を残りのスペースを埋める方法は？

この記事では、レイアウト効果を実現する方法について説明します。Box1要素は残りのスペースを占有し、Box2要素で占有されている領域を除外した後、親コンテナを満たします。質問に記載されている最初のコードは、インラインブロックを使用して、予想される水平方向の配置ではなく、Box1とBox2が垂直に配置され、Box1が残りのスペースを占有します。期待される結果を達成するために、レイアウト方法を調整する必要があります。

記事には2つのソリューションがあります。

ソリューション1：calc（）関数を使用します

このスキームは、表示：元のコードのインラインブロック設定を保持し、CSS Calc（）関数を介してBox1の幅を計算します。 Calc（）関数を使用すると、単純な数学操作を実行できます。この操作では、親コンテナ幅を使用してBox2の幅（200px）を減算してBox1の幅を計算します。コードは次のとおりです。

 ＃box1 {
  幅：calc（100％-200px）;
}

この方法では、Box2の幅を事前に知る必要があることに注意する必要があります。 Box2の幅が動的に変化する場合、Calc（）の値は実際の状況に応じて動的に調整する必要があります。

ソリューション2：フレックスレイアウトを使用します

このソリューションは、フレックスレイアウトを利用して、より柔軟なレイアウト制御を実現します。親コンテナ#contentをフレックスコンテナに設定し、Flexを使用してBox1の残りのスペースを割り当てます。コードは次のとおりです。

 ＃コンテンツ {
  ディスプレイ：Flex;
  Flex-Direction：row;
}

＃box1 {
  フレックス：1;
}

＃box2 {
  Flex-Shrink：0;
  幅：200px;
}

フレックスレイアウトは、より強力なレイアウト機能を提供し、さまざまなサイズとレスポンシブレイアウトの要素のニーズをより便利に処理できるようにします。ソリューション1およびソリューション2と比較して、より柔軟でメンテナンスが容易です。

以上がBox2が除外された後、Box1を残りのスペースに埋める方法は？ または： Box1は残りのスペースをどのように満たし、Box2で占有されているエリアを除外しますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。