Wie fülle ich die verbleibende Containerbreite mit CSS mithilfe von „calc'?

Verbleibende Containerbreite mit CSS füllen

Das Ziel besteht darin, die Breite eines Elements mit dem Namen „Mitte“ innerhalb eines Container-Divs zu maximieren und so zu ermöglichen Es soll den verbleibenden Platz belegen, nachdem andere Elemente untergebracht wurden.

Lösung:

Die Verwendung der CSS-Eigenschaft „calc“ ist der Schlüssel dazu. Indem wir die verfügbare Breite berechnen und die feste Breite anderer Elemente subtrahieren, können wir die verbleibende Breite dynamisch bestimmen.

<code class="css">#middle {
  display: inline-block;
  width: calc(100% - <fixed-element-width>);
}</code>

Im bereitgestellten Beispiel:

<code class="html"><div class="left">100 px wide!</div><div class="right">Fills width!</div></code>

Und CSS:

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

Das rote Element hat eine feste Breite von 100 Pixeln, während das blaue Element den verbleibenden Raum nach Berücksichtigung der festen Breite ausfüllt.

Als Alternative dazu, keinen Platz zwischen den Elementen zu lassen, können Sie kann Schriftgröße: 0 für das äußere Containerelement festlegen.

Das obige ist der detaillierte Inhalt vonWie fülle ich die verbleibende Containerbreite mit CSS mithilfe von „calc'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!