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

So positionieren Sie zwei Divs nebeneinander in CSS

In CSS können Sie zwei Divs mithilfe von Float-Eigenschaften nebeneinander platzieren.

Einen Div schweben lassen

Einen Div daneben schweben lassen der andere, fügen Sie den Float hinzu: left; Eigentum an die gewünschte div. Dadurch wird das Div auf die linke Seite des Wrappers verschoben.

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    float: left; /* Float div to the left */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* Prevent text wrapping below #first */
}

Beide Divs schweben lassen

Um beide Divs nebeneinander schweben zu lassen, fügen Sie den Float hinzu : links; Eigentum an beide Divs. Möglicherweise müssen Sie jedoch overflow:hidden; hinzufügen. zum Wrapper-Div, um zu verhindern, dass sich die Divs über die Wrapper-Breite hinaus ausdehnen.

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* Prevent floated divs from extending beyond wrapper */
}
#first {
    width: 300px;
    float: left; /* Float div 1 to the left */
    border: 1px solid red;
}
#second {
    float: left; /* Float div 2 to the left */
    border: 1px solid green;
}

Durch die Verwendung dieser Float-Eigenschaften können Sie zwei Divs nebeneinander innerhalb eines Wrapper-Divs positionieren. Die Höhe des grünen Bereichs bestimmt die Gesamthöhe des Wrappers.

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!