Problem:

Ich arbeite mit Breakdance Builder in WordPress. Ich habe ein Div, der wiederum 2 DIVs beinhaltet. Ich möchte die beiden Divs im übergeordneten DIV so positionieren, dass das obere Div am oberen Rand und das untere Div am unteren Rand des übergeordneten Divs ausgerichtet ist. Dazwischen soll „Space between“ sein.

Anleitung zur Positionierung von DIVs im Breakdance Builder

Um zwei DIVs innerhalb eines übergeordneten DIVs im Breakdance Builder so zu positionieren, dass das obere DIV am oberen Rand und das untere DIV am unteren Rand des übergeordneten DIVs ausgerichtet ist, während dazwischen Platz bleibt, folge diesen Schritten:

1. Erstelle das übergeordnete DIV (Logobereich):
   • Füge ein neues DIV-Element in deinen Breakdance Builder ein. Dies wird dein Container-DIV sein.
2. Füge die beiden untergeordneten DIVs hinzu (Logo Div & Google Button Div):
   • Innerhalb des übergeordneten DIVs füge zwei weitere DIVs hinzu. Diese werden die Elemente sein, die du positionieren möchtest.
3. Stelle die Höhe des übergeordneten DIVs ein:
   • Stelle sicher, dass das übergeordnete DIV eine definierte Höhe hat. Du kannst dies im Stilbereich des übergeordneten DIVs tun, indem du eine Höhe in Pixeln oder Prozent angibst, z.B. height: 400px;.
4. Verwende Flexbox für die Positionierung:
   • Um die beiden DIVs korrekt zu positionieren, kannst du Flexbox verwenden. Gehe zu den Stileinstellungen des übergeordneten DIVs und setze die folgenden CSS-Eigenschaften:
     • display: flex;
     • flex-direction: column;
     • justify-content: space-between;

   Diese Einstellungen sorgen dafür, dass die beiden untergeordneten DIVs am oberen und unteren Rand des übergeordneten DIVs ausgerichtet sind, mit gleichmäßigem Abstand dazwischen.

5. Styling der untergeordneten DIVs (Logobereich):
   • Du kannst die untergeordneten DIVs nach Belieben stylen, z.B. Hintergrundfarbe, Padding oder Margins hinzufügen, um das Layout weiter anzupassen.

Beispiel-CSS

Hier ist ein einfaches Beispiel, wie das CSS für das übergeordnete DIV aussehen könnte:

#parent-div {
    height: 400px; /* Höhe des übergeordneten DIVs */
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Vertikale Anordnung */
    justify-content: space-between; /* Platz zwischen den DIVs */
}

Fazit

Mit diesen Schritten kannst du die beiden DIVs im Breakdance Builder effektiv positionieren. Flexbox ist eine leistungsstarke Methode, um Layouts zu gestalten, und ermöglicht dir eine flexible und responsive Gestaltung deiner Webseite. Viel Spaß beim Erstellen deiner Seite!

Anleitung Breakdance-Bordmittel

1. Erstelle die Struktur im Breakdance Builder

• Füge ein übergeordnetes Div hinzu (z. B. „Container“).
• Innerhalb dieses Containers fügst du zwei untergeordnete Divs hinzu:
  • Div 1: Das obere Element.
  • Div 2: Das untere Element.

2. Aktiviere Flexbox für das übergeordnete Div

• Wähle das übergeordnete Div (Container) aus.
• Gehe zu den Layout-Einstellungen im Breakdance Builder.
• Setze den Display-Typ auf Flex.

3. Richte die Flexbox-Ausrichtung ein

• Stelle sicher, dass die Flex-Richtung auf column gesetzt ist (damit die Elemente vertikal ausgerichtet werden).
• Setze die Eigenschaft justify-content auf space-between. Dadurch wird Div 1 an den oberen Rand und Div 2 an den unteren Rand des Containers verschoben, mit gleichmäßigem Abstand dazwischen.

4. Optional: Zentriere die Inhalte horizontal

• Wenn du die Inhalte der beiden Divs horizontal zentrieren möchtest, setze align-items auf center.

5. Vorschau und Anpassungen

• Überprüfe das Layout in der Vorschau und passe ggf. Abstände oder Größen der Divs an.

Zusätzlicher CSS-Code (falls nötig)

Falls du zusätzliche Anpassungen im CSS vornehmen möchtest, kannst du folgendes verwenden:

Ergebnis

Das obere Div wird am oberen Rand des Containers ausgerichtet, das untere am unteren Rand, und der Platz dazwischen wird gleichmäßig verteilt. Dies ist eine flexible und responsive Lösung, die sich auch bei unterschiedlichen Bildschirmgrößen gut verhält.