CSS `calc()` を使用して、要素がコンテナの残りの幅を満たすようにするにはどうすればよいですか?

CSS でコンテナの幅を効率的に埋める

HTML マークアップには、画像、中央の要素、右の要素の 3 つの要素を含むヘッダー バーがあります。中央の要素は、コンテナの残りの幅を占めることを目的としています。

これを実現するために、CSS は強力なツール calc() を提供します。この関数を使用すると、使用可能なスペースに基づいて長さを動的に計算できます。

魔法は次の CSS ルールにあります:

<code class="css">#middle {
  width: calc(100% - 100px);
}</code>

このルールでは、#middle 要素の幅は減算によって計算されます。コンテナの合計幅 (100%) からの固定幅 #left 要素の幅 (100px)。これにより、中央の要素が残りのスペースを完全に埋めることができます。

要約すると、calc() を利用することで、利用可能なコンテナースペースに基づいて #middle の幅を動的に調整でき、その結果、見た目が美しく完璧な結果が得られます。整列されたヘッダー バー。

以上がCSS `calc()` を使用して、要素がコンテナの残りの幅を満たすようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。