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

So positionieren Sie zwei Divs nebeneinander

Um zwei Div-Elemente nebeneinander zu platzieren, können Sie den Float verwenden Eigenschaft in CSS.

Legen Sie innerhalb des übergeordneten Div (#wrapper) seine Breite fest und fügen Sie zur visuellen Darstellung einen Rahmen hinzu Klarheit.

#wrapper {
  width: 500px;
  border: 1px solid black;
}

Geben Sie dem ersten Div (#first) eine feste Breite und wenden Sie einen Rahmen an:

#first {
  width: 300px;
  border: 1px solid red;
}

Um das erste Div nach links zu verschieben, fügen Sie Folgendes hinzu:

#first {
  ...
  float: left;
}

Lassen Sie das zweite Div (#second) ohne Angabe einer Breite, sondern geben Sie eine an border:

#second {
  border: 1px solid green;
}

Um sicherzustellen, dass das zweite Div die Höhe des ersten Div respektiert, fügen Sie eine Überlaufeigenschaft zum Wrapper-Div hinzu:

#wrapper {
  ...
  overflow: hidden;
}

Alternativ können Sie beides im ersten Div schweben lassen und zweite Divs, aber denken Sie daran, die Überlaufeigenschaft für das Wrapper-Div so festzulegen, dass sie die schwebenden untergeordneten Elemente enthält:

#wrapper {
  ...
  overflow: hidden;
}

#first {
  ...
  float: left;
}

#second {
  ...
  float: left;
}

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