Wie kann man den verbleibenden Speicherplatz nach dem ausgeschlossenen Box2 füllen? oder: Wie füllt Box1 den verbleibenden Raum und schließt den von Box2 besetzten Bereich aus?

Wie kann man den verbleibenden Speicherplatz nach dem Ausschluss von Box2 füllen?

In diesem Artikel wird untersucht, wie ein Layout -Effekt erzielt wird: Box1 -Element nimmt den verbleibenden Raum ein und füllt nach dem Ausschluss des von Box2 -Elements besetzten Bereichs immer noch den übergeordneten Container. Der in der Frage angegebene anfängliche Code verwendet Inline-Block, um zu veranlassen, dass Box1 und Box2 vertikal angeordnet werden, und nicht die erwartete horizontale Anordnung, und Box1 nimmt den verbleibenden Platz ein. Um die erwarteten Ergebnisse zu erzielen, müssen wir die Layout -Methode anpassen.

In dem Artikel sind zwei Lösungen bereitgestellt:

Lösung 1: Verwenden Sie die Funktion calc ()

Dieses Schema behält die Einstellung der Anzeige: Inline-Block im ursprünglichen Code bei und berechnet die Breite von Box1 über die CSS Calc () -Funktion. Mit der Funktion calc () können wir einfache mathematische Operationen ausführen, bei denen wir die übergeordnete Containerbreite verwenden, um die Breite von Box2 (200px) zu subtrahieren, um die Breite von Box1 zu berechnen. Der Code ist wie folgt:

 #Box1 {
  Breite: Calc (100% - 200px);
}

Es ist zu beachten, dass diese Methode die Kenntnis der Breite von Box2 im Voraus erfordert. Wenn sich die Breite von Box2 dynamisch ändert, muss der Wert in Calc () entsprechend der tatsächlichen Situation dynamisch angepasst werden.

Lösung 2: Verwenden Sie das Flex -Layout

Diese Lösung verwendet Flex -Layout, um eine flexiblere Layout -Kontrolle zu erzielen. Ziehen Sie den verbleibenden Speicherplatz für Box1 aus, indem Sie den übergeordneten Container #-Content in den Flex-Behälter einstellen und Flex: 1. In der Zwischenzeit verhindert Flex-Shrink: 0 verhindert, dass Box2 komprimiert wird. Der Code ist wie folgt:

 #Inhalt {
  Anzeige: Flex;
  Flex-Richtung: Reihe;
}

#Box1 {
  Flex: 1;
}

#Box2 {
  Flex-Shrink: 0;
  Breite: 200px;
}

Flex -Layouts bieten stärkere Layoutfunktionen und ermöglichen eine bequemere Handhabung der Bedürfnisse von Elementen unterschiedlicher Größen und reaktionsschneller Layouts. Im Vergleich zu Lösung 1 und Lösung 2 ist es flexibler und leichter zu warten.

Das obige ist der detaillierte Inhalt vonWie kann man den verbleibenden Speicherplatz nach dem ausgeschlossenen Box2 füllen? oder: Wie füllt Box1 den verbleibenden Raum und schließt den von Box2 besetzten Bereich aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!