Wie teilt man die Bildschirmbreite auf zwei Elemente mit festen und flexiblen Breiten auf?

Aufteilen der Bildschirmbreite auf zwei Elemente

Beim Webdesign kann es vorkommen, dass Sie die Bildschirmbreite auf zwei Teilbereiche aufteilen müssen Einer hat eine feste Breite und der andere nimmt den verbleibenden Raum ein. So können Sie dies erreichen:

Verwenden von Float mit prozentualer Breite:

Dieser Ansatz verwendet die CSS-Float-Eigenschaft, um die Divs nebeneinander zu positionieren.

.left {
    float: left;
    width: 83%;
}

.right {
    float: right;
    width: 17%;
}

Beachten Sie, dass sich die Breiten zu 100 % addieren, um sicherzustellen, dass die Divs die gesamte Breite des übergeordneten Containers ausfüllen.

Flexbox verwenden:

Flexbox ist ein vielseitigeres Layoutsystem, mit dem Sie die Größe und Position von Elementen mithilfe flexibler Abmessungen steuern können.

.container {
    display: flex;
}

.left {
    flex: 1;
}

.right {
    width: 250px;
}

In diesem Beispiel ist das Div „.container“ so eingestellt, dass es als Flexbox angezeigt wird , und dem „.left“-Div wird ein flexibler Wachstumsfaktor von 1 zugewiesen, wodurch es erweitert werden kann, um den verbleibenden Platz nach dem „.right“-Div mit fester Breite auszufüllen.

Verwenden der Anzeigetabelle :

Sie können display:table auch verwenden, um ein zweispaltiges Layout zu erstellen, bei dem die erste Spalte eine feste Breite hat und die zweite Spalte den verbleibenden Platz einnimmt.

.left {
    display: table-cell;
    width: 250px;
}

.right {
    display: table-cell;
}

Das obige ist der detaillierte Inhalt vonWie teilt man die Bildschirmbreite auf zwei Elemente mit festen und flexiblen Breiten auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!