Wie kann ich mit CSS „calc()“ dafür sorgen, dass ein Element die verbleibende Breite seines Containers ausfüllt?

Containerbreite in CSS effizient ausfüllen

In unserem HTML-Markup haben wir eine Kopfzeile mit drei Elementen: einem Bild, einem mittleren Element und einem rechten Element. Das mittlere Element soll die restliche Breite des Containers einnehmen.

Um dies zu erreichen, stellt CSS ein leistungsstarkes Tool zur Verfügung: calc(). Diese Funktion ermöglicht dynamische Berechnungen von Längen basierend auf dem verfügbaren Platz.

Der Zauber liegt in der folgenden CSS-Regel:

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

In dieser Regel wird die Breite des #mittleren Elements durch Subtrahieren berechnet die Breite des #left-Elements mit fester Breite (100 Pixel) von der gesamten Containerbreite (100 %). Dadurch wird sichergestellt, dass das mittlere Element den verbleibenden Raum perfekt ausfüllt.

Zusammenfassend lässt sich sagen, dass wir durch die Verwendung von calc() die Breite von #middle basierend auf dem verfügbaren Containerraum dynamisch anpassen können, was zu einem ästhetisch ansprechenden und perfekten Ergebnis führt ausgerichtete Kopfzeile.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS „calc()“ dafür sorgen, dass ein Element die verbleibende Breite seines Containers ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!