Wie kann ich mit CSS Flexbox zwei Divs nebeneinander positionieren?

Zwei Divs nebeneinander mit CSS positionieren

Bei der Webentwicklung besteht die Notwendigkeit, Elemente nebeneinander zu positionieren. Eine Methode, dies in CSS zu erreichen, ist Flexbox.

Der Flexbox-Ansatz

Flexbox ermöglicht es Ihnen, Elemente in einer flexiblen gitterartigen Struktur anzuordnen. So positionieren Sie zwei Divs nebeneinander:

1. Setzen Sie den übergeordneten Container auf Flex: Fügen Sie display: flex zum übergeordneten Div hinzu. Dies ermöglicht das Flexbox-Layout.
2. Definieren Sie das schmale Div: Für das Div, das 200 Pixel breit sein sollte, legen Sie seine Breite auf 200 Pixel fest. Darüber hinaus können Sie es aus Gründen der Sichtbarkeit formatieren.
3. Erlauben Sie dem linken Div, den verbleibenden Platz auszufüllen:Verwenden Sie Flex: 1 für das verbleibende Div. Diese Eigenschaft weist den Browser an, das Div so zu vergrößern, dass es den verbleibenden verfügbaren Platz im übergeordneten Container einnimmt.

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

<div>

Mit diesem Ansatz können Sie zwei Divs problemlos nebeneinander positionieren. wobei einer eine feste Breite hat und der andere den verbleibenden Bildschirmbereich ausfüllt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS Flexbox zwei Divs nebeneinander positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!