Die verbleibende Breite eines Containers mit CSS füllen

In einem Szenario, in dem Sie einen Header mit drei in einer Reihe angeordneten Elementen haben, wird der Ziel ist es, dass das mittlere Element den verbleibenden Platz im Header einnimmt. Um dies zu erreichen, erweist sich die Kombination aus Inline-Block-Anzeige und der Funktion calc() in CSS als effektiv.

Die Code-Lösung

Die bereitgestellte HTML-Struktur besteht aus a Kopfzeile, die ein Bild, ein mittleres Element mit Text und ein rechtes Element enthält. Um ihr Layout zu manipulieren, wenden wir CSS wie folgt an:

header {
  background: red;
}

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

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

Erläuterung

• Inline-Block: Durch die Anzeige von Elementen als Inline-Blöcke wird sichergestellt, dass sie in derselben Zeile bleiben und sich wie Blöcke verhalten Elemente, die Breiten- und Höhenanpassungen ermöglichen.
• calc() Funktion: Diese Funktion führt mathematische Operationen aus zu CSS-Werten. In diesem Fall berechnen wir die verbleibende Breite, indem wir die feste Breite des linken Elements (100 Pixel) von 100 % subtrahieren.

Das Ergebnis dieses Codes ist, dass das mittlere Element gestreckt wird, um den verbleibenden Raum auszufüllen im Header, der seinen Inhalt aufnimmt, während das rechte Element seine Breite von 100 Pixel beibehält.

Alternative Lösung

Wenn Sie lieber ein Leerzeichen zwischen den Divs haben möchten, können Sie das CSS ändern, indem Sie die Schriftgröße des äußeren Elements (Kopfzeile) auf 0 setzen:

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