CSSで中央の要素をコンテナの残りの幅に埋めるにはどうすればよいですか?

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

ヘッダーに 3 つの要素が連続して配置されているシナリオでは、目標は、中央の要素がヘッダー内の残りのスペースを占めるようにすることです。これを実現するには、CSS のインライン ブロック表示と calc() 関数の組み合わせが効果的です。

コード ソリューション

提供される HTML 構造は、画像を含むヘッダー、テキストを含む中央の要素、右の要素。レイアウトを操作するには、次のように CSS を適用します。

<code class="css">header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}</code>

説明

• Inline-Block: 要素をインラインで表示します。 -blocks は、ブロック要素が同じ行に留まり、ブロック要素のように動作することを保証し、幅と高さの調整を可能にします。
• calc() 関数: この関数は、CSS 値に対して数学的演算を実行します。この場合、左側の要素の固定幅 (100px) を 100% から減算して残りの幅を計算します。

このコードの結果は、中央の要素が伸びて残りのスペースを埋めることになります。ヘッダー内で、右側の要素が 100 ピクセルの幅を維持しながらコンテンツを収容します。

代替ソリューション

div の間にスペースを入れたい場合は、次のようにします。外側の要素 (ヘッダー) のフォントサイズを 0 に設定して CSS を変更します:

<code class="css">header {
  font-size: 0;
  ...
}</code>

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