Wie platziere ich zwei Divs mithilfe von CSS-Floats nebeneinander?

So positionieren Sie zwei Divs nebeneinander mit CSS

Mit CSS kann die gewünschte vertikale Ausrichtung und Nähe von Div-Elementen erreicht werden durch verschiedene Techniken. Ein effektiver Ansatz ist die Verwendung von Floating.

Verwendung von Float

Wenn Sie eines oder beide der inneren Divs nebeneinander schweben lassen, können sie horizontal ausgerichtet werden, ohne das Layout der angrenzenden Elemente zu beeinträchtigen Inhalt.

Floating One Div

Hinzufügen der schweben: links; Die Eigenschaft „#first“ im folgenden CSS verschiebt es nach links, wodurch es die linke Seite des #wrapper-Divs einnimmt, während das #second-Div auf der rechten Seite verbleibt.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  overflow: hidden;
}

Floating Beide Divisionen

Das Schweben sowohl der #ersten als auch der #zweiten führt ebenfalls zu einer Seite-an-Seite-Anordnung. Es ist jedoch wichtig zu verhindern, dass das #wrapper-Div um seine schwebenden untergeordneten Elemente herum schrumpft. Um dies zu erreichen, fügen Sie overflow:hidden; an #wrapper und stellen Sie sicher, dass es beide schwebenden Elemente enthält.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  float: left;
}

Das obige ist der detaillierte Inhalt vonWie platziere ich zwei Divs mithilfe von CSS-Floats nebeneinander?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!