Wie kann ich zwei Divs nebeneinander positionieren, wobei ein Div eine feste Breite hat und das andere erweitert wird, um den verbleibenden Raum auszufüllen?

Zwei Divs nebeneinander in CSS platzieren

Bei der Arbeit mit HTML und CSS besteht die Notwendigkeit, Elemente nebeneinander zu positionieren ist üblich. Dieser Artikel befasst sich mit einem bestimmten Szenario, in dem das Ziel darin besteht, zwei horizontal benachbarte Divs zu erstellen, wobei ein Div auf eine bestimmte Breite beschränkt ist, während das andere den verbleibenden verfügbaren Platz einnimmt.

Flexbox-Lösung

Moderne Browser unterstützen eine CSS-Eigenschaft namens Flexbox, die eine leistungsstarke Methode zum flexiblen Anordnen von Elementen bietet. Um das gewünschte Layout zu erreichen, sollten Sie die Verwendung von Flexbox in Betracht ziehen. Hier ist ein Codeausschnitt, der diesen Ansatz demonstriert:

<div>

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

In diesem Beispiel:

• #parent ist das enthaltende Div, das das Flexbox-Layout festlegt.
• #narrow hat eine feste Breite von 200 Pixel.
• #wide soll wachsen und den verbleibenden verfügbaren Platz belegen Platz auf dem Bildschirm, aufgrund der Eigenschaft „flex: 1“.

Durch die Verwendung von Flexbox können Sie ganz einfach nebeneinander liegende Divs erstellen, ohne dass komplexe Breitenberechnungen oder zusätzliche CSS-Regeln erforderlich sind. Diese Lösung ist sowohl prägnant als auch flexibel und eignet sich daher für eine Reihe von Szenarien.

Das obige ist der detaillierte Inhalt vonWie kann ich zwei Divs nebeneinander positionieren, wobei ein Div eine feste Breite hat und das andere erweitert wird, um den verbleibenden Raum auszufüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!