Nicht selten ist es notwendig, Elemente vertikal auszurichten. Doch kompliziert wird es, wenn man zwei horizontal aneinandergereihte Elemente vertikal ausrichten möchte. Wenn man aber weiß, wie es geht, dann ist dies gar nicht kompliziert. Ich zeige euch, wie Ihr jedes Design der Welt mit wenig Arbeit vertikal ausrichten könnt.
Elemente nebeneinander ausrichten
Schauen wir uns doch zunächst einmal ein Element an, wie wir es nicht haben möchten.
Obwohl beide Spalten aus denselben Elementen bestehen (Titel, Preisliste, Text und Button), sehen die beiden Spalten komplett verschieden aus. Es wäre von Vorteil, wenn die Elemente jeweils nebeneinander so ausgerichtet sind, dass Sie dieselbe Höhe haben.
Bei diesem Layout wird es überhaupt erst deutlich, dass in beiden Spalten dieselben Elemente gegenübergestellt sind. Und ich habe nicht etwa die Höhe jedes Elements einzeln festgelegt, oder manuell paddings hinzugefügt. Es funktionert ganz einfach mit nur ein paar Zeilen CSS-Code!
Vertikale Ausrichtung leicht gemacht – mit der Flexbox
Vielen ist die Flexbox bereits ein Begriff. Allerdings ist wenigen bewusst, dass die Flexbox auch dazu verwendet werden kann, Elemente vertikal zu flexen!
Zunächst müssen wir dem Container, welcher die Spalten enthält, eine Klasse zuweisen. Da ich Elementor verwende, setze ich einfach die neue Klasse pnFlexColumn auf den gesamten Abschnitt. Wenn Ihr nur mit HTML arbeitet, setzt diese Klasse einfach auf das div-Element, welches den Spalten übergeordnet ist, z.B:
<div class="pnFlexColumn">
<div style="width: 50%;">Inhalte Spalte 1...</div>
<div style="width: 50%;">Inhalte Spalte 2...</div>
</div>
Es ist wichtig, dass eure Spalten dasselbe Parent-Element haben.
Nun müssen wir die untergeordneten Elemente für unser CSS anvisieren. Mit Elementor ist das ganz einfach, dank des .elementor-widget-wrap-Selektors:
.pnFlexColumn .elementor-widget-wrap {
/* Visiert alle Widgets an, die einem Element mit der Klasse .pnFlexColumn untergeordnet sind*/
}Ohne Elementor sollte es grundsätzlich reichen, untergeordnete divs anzuvisieren:
.pnFlexColumn div {
/* Visiert alle der Klasse untergeordneten divs an*/
}Wenn dies nicht funktioniert, müsst Ihr mit dem Browser-Inspector eure Elemente näher anvisieren.
Fangen wir nun mit dem Styling an. Zunächst müssen wir eine Höhe festlegen, da sonst unsere flexbox nicht funktioniert. Standartmäßig richtet die flexbox in Zeilen aus, wir möchten aber in der Spalte ausrichten. Außerdem legen wir fest, dass zwischen den Elementen Space sein soll.
.pnFlexColumn .elementor-widget-wrap {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}Und das wars! Wenn Ihr eure Elemente korrekt kaskadiert und mit CSS anvisiert habt, sollten eure nebeneinander liegenden Elemente nun vertikal ausgerichtet sein.
