Wie kann ein mittleres Element die verbleibende Breite eines Containers in CSS ausfüllen?

Die verbleibende Breite eines Containers mit CSS füllen

In einem Szenario, in dem Sie eine Kopfzeile mit drei in einer Reihe angeordneten Elementen haben, wird die 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:

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

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

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

Erläuterung

• Inline-Block: Elemente als Inline anzeigen -blocks sorgt dafür, dass sie auf derselben Linie bleiben und sich wie Blockelemente verhalten, was Breiten- und Höhenanpassungen ermöglicht.
• calc()-Funktion: Diese Funktion führt mathematische Operationen an CSS-Werten durch. 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 in der Kopfzeile, um den Inhalt aufzunehmen, während das rechte Element seine Breite von 100 Pixel beibehält.

Alternative Lösung

Wenn Sie lieber einen Leerraum zwischen den Divs haben möchten, können Sie dies tun Ändern Sie das CSS, indem Sie die Schriftgröße des äußeren Elements (Header) auf 0 setzen:

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

Das obige ist der detaillierte Inhalt vonWie kann ein mittleres Element die verbleibende Breite eines Containers in CSS ausfüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!