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

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

特定のシナリオでは、コンテナ内の残りの幅を特定の要素に割り当てることが必要になります。 。たとえば、左側の画像、中央の要素、右側の要素の 3 つの要素を持つヘッダー バーを考えてみましょう。目標は、「中央」の要素が画像と右の要素の間の残りのスペースを確実に埋めることです。

希望のレイアウトを実現する

この希望のレイアウトを実現するには、CSS で calc() の多用途性を採用します。次のコードの実装は、このアプローチの例です。

HTML:

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

CSS:

<code class="css">.left {
  display: inline-block;
  width: 100px;
  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);
  background: blue;
  color: white;
}</code>

このコード内:

• .left クラスと .right クラスがそれぞれの要素に割り当てられます。
• display: inline-block;他のコンテンツの周りを流れながら要素を水平方向に整列できるようにします。
• width: .left 要素の明示的な幅を 100 ピクセルに設定し、残りのスペースを .right 要素用に残します。
• calc (100% - 100ピクセル); 100% (コンテナの全幅) から 100px (.left の幅) を減算して、.right 要素の幅を動的に計算します。この値により、.right 要素が残りのスペースを確実に埋めることができます。

この手法を利用すると、.right 要素は利用可能なスペースを埋めるように幅を自動的に調整し、目的のレイアウトを効果的に実現します。

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