Wie kann ich mithilfe von CSS dafür sorgen, dass ein Element die verbleibende Breite eines Containers ausfüllt?

Verbleibende Containerbreite mit CSS füllen

In bestimmten Szenarien ist es notwendig, die verbleibende Breite innerhalb eines Containers einem bestimmten Element zuzuweisen . Stellen Sie sich beispielsweise eine Kopfzeile mit drei Elementen vor: einem Bild links, einem mittleren Element und einem Element rechts. Das Ziel besteht darin, sicherzustellen, dass das „mittlere“ Element den verbleibenden Raum zwischen dem Bild und dem rechten Element ausfüllt.

Erreichen des gewünschten Layouts

Um dieses gewünschte Layout zu erreichen Nutzen Sie die Vielseitigkeit von calc() in Ihrem CSS. Die Implementierung des folgenden Codes veranschaulicht diesen Ansatz:

HTML:

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

CSS:

<code class="css">.left {
  display: inline-block;
  width: 100px;
  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);
  background: blue;
  color: white;
}</code>

In diesem Code:

• The Den jeweiligen Elementen werden die Klassen .left und .right zugewiesen.
• display: inline-block; Ermöglicht die horizontale Ausrichtung der Elemente, während sie um andere Inhalte herumfließen.
• Breite: Legt die explizite Breite des .left-Elements auf 100 Pixel fest und lässt den verbleibenden Platz für das .right-Element übrig.
• berechnet (100 % – 100 Pixel); Berechnet dynamisch die Breite für das .right-Element, indem 100 Pixel (die Breite von .left) von 100 % (die volle Breite des Containers) subtrahiert werden. Dieser Wert stellt sicher, dass das .right-Element den verbleibenden Platz ausfüllt.

Durch die Verwendung dieser Technik passt das .right-Element seine Breite automatisch an, um den verfügbaren Platz auszufüllen und so effektiv das gewünschte Layout zu erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS dafür sorgen, dass ein Element die verbleibende Breite eines Containers ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!