「calc」を使用してCSSで残りのコンテナの幅を埋めるにはどうすればよいですか?-CSSチュートリアル-php.cn

「calc」を使用してCSSで残りのコンテナの幅を埋めるにはどうすればよいですか?

Linda Hamilton

リリース： 2024-10-27 06:58:02

オリジナル

720 人が閲覧しました

How to Fill Remaining Container Width with CSS Using `calc`?

残りのコンテナ幅を CSS で埋める

目的は、コンテナ div 内の 'middle' という名前の要素の幅を最大化することです。

解決策:

これを達成するには、CSS プロパティ 'calc' を利用することが鍵となります。利用可能な幅を計算し、他の要素の固定幅を差し引くことで、残りの幅を動的に決定できます。

<code class="css">#middle {
  display: inline-block;
  width: calc(100% - <fixed-element-width>);
}</code>

ログイン後にコピー

提供された例では:

<code class="html"><div class="left">100 px wide!</div><div class="right">Fills width!</div></code>

ログイン後にコピー

および CSS:

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

ログイン後にコピー

赤い要素の幅は 100 ピクセルの固定幅ですが、青い要素は固定幅を考慮した後の残りのスペースを埋めます。

要素間にスペースを残さない代わりに、次のようにします。外側のコンテナ要素に font-size: 0 を設定できます。

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