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

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

コード ソリューション

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

header {
  background: red;
}

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

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

説明

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

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

Alternative解決策

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

header {
  font-size: 0;
  ...
}