Heim >Web-Frontend >CSS-Tutorial >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
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!