Wie fülle ich die verbleibende Breite eines Containerelements in CSS aus?

Verbleibende Containerbreite mit CSS füllen

Im Bereich Webdesign ist es oft wichtig, den verbleibenden Platz innerhalb eines Containerelements zu füllen . Dies kann besonders nützlich sein, wenn Sie Kopfzeilen oder Navigationsleisten erstellen, die einen Teil des Bildschirms einnehmen. Lassen Sie uns untersuchen, wie Sie dies mithilfe von CSS erreichen können.

Bedenken Sie den folgenden Codeausschnitt:

<code class="html"><header>
  <img src="image.jpg" />
  <div id="middle">Middle Element</div>
  <div id="right">Right Element</div>
</header></code>

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

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

#right {
  background: green;
  display: inline-block;
}</code>

Wie Sie sehen können, wird erwartet, dass das Div mit der ID „middle“ gefüllt wird den verbleibenden Platz in der Kopfzeile. Lassen Sie uns CSS verwenden, um dies zu erreichen:

<code class="css">#middle {
  flex: 1; /* New code */
}</code>

Durch das Hinzufügen von flex: 1 weisen Sie den Browser an, ein flexibles Größenschema für dieses Element zu verwenden, bei dem es unter Berücksichtigung der Einschränkungen so viel Platz wie möglich einnimmt seines Containers.

Zusätzliche Hinweise:

• Die Funktion calc() kann verwendet werden, um mathematische Operationen an CSS-Werten durchzuführen. In diesem Fall würde calc(100% - 100px) die verbleibende Breite des Containers berechnen, nachdem das linke Div 100 Pixel einnimmt.
• Alternativ können Sie „font-size: 0“ für das äußere Element festlegen, um alle zu entfernen Leerzeichen zwischen Inline-Elementen.

Das obige ist der detaillierte Inhalt vonWie fülle ich die verbleibende Breite eines Containerelements in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!