Div-Boxen ausrichten / gleich groß machen

Card image cap

Div-Boxen ausrichten / gleich groß machen

Zwei Div-Boxen nebeneinander gleich groß auszurichten ist ein wenig "Fummelarbeit", vor allem wenn der Inhalt der Boxen aus der Datenbank geladen wird und dieser nicht immer dieselbe Länge hat.

Abhilfe schafft hier die CSS Angabe display:flex

Mit display:flex können wir ein Div zu einer Flexbox machen. Alle darin befindlichen Container können wir nun mit Hilfe weiterer Angaben in der Flexbox positionieren.


Für den Anfang benötigen wir 2 Div-Container, die wir mit ein wenig Inhalt füllen.

<div class="div1">
    Zeile 1 <br />
    Zeile 2 <br />
    Zeile 3
</div>

<div class="div2">
    Zeile 1 <br />
    Zeile 2
</div>

Dazu erstellen wir ein paar Zeilen CSS um die Div-Container nebeneinander zu bekommen.

<style>
    .div1 {
        float:left;
        width:200px;
        border:1px solid red;
    }

    .div2 {
        float:left;
        width:200px;
        border:1px solid green;
    }
</style>

So erhalten wir einen roten und einen grünen Kasten, die nebeneinander dargestellt werden, aber in verschiedenen Höhen.


Jetzt kommt die Flexbox zum Einsatz.

Hierfür erstellen wir um die beiden Div-Container einen weiteren Div-Container und machen diesen zu einer Flexbox.

<div class="divFlexbox">
    <div class="div1">
        Zeile 1 <br />
        Zeile 2 <br />
        Zeile 3
    </div>

    <div class="div2">
        Zeile 1 <br />
        Zeile 2
    </div>
</div>

Unsere CSS-Angaben erweitern wir ebenfalls.

<style>
    .divFlexbox {
        display:flex;
    }

    .div1 {
        width:200px;
        border:1px solid red;
    }

    .div2 {
        width:200px;
        border:1px solid green;
    }
</style>

Hinzu kommt die Anweisung für den neuen Div-Container. Außerdem können wir die float Anweisung der beiden bunten Kästchen entfernen. Die Ausrichtung können wir jetzt über die Flexbox steuern.

Heraus kommen 2 Kästchen, die nebeneinander in derselben Höhe angezeigt werden.


Ausrichtung innerhalb der Flexbox

Jetzt können wir in den CSS-Anweisungen für die Flexbox noch die gewünschte Ausrichtung angeben. Wir können die Boxen oben, unten oder in der Mitte anordnen, falls uns die gleichgroße Darstellung nicht gefällt.

align-items: flex-start | flex-end | center | baseline | stretch


Außerdem können wir noch festlegen, ob die Divs nebeneinander oder untereinander dargestellt werden sollen.

flex-direction: row | column


Zusätzlich gibt es noch weitere Anweisungen, die Sie gerne selbst einmal ausprobieren können:

flex-wrap: nowrap | wrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-content: flex-start | flex-end | center | space-between | space-around | stretch





RP-Datentechnik Hamburg oHG

Wir sind ein Softwareunternehmen aus Hamburg, das sich neben Webdesign und Webentwicklung (Websites, Online-Shops, Jobbörsen etc.), auf Software-Programmierung mit RPG (Report Program Generator / AS400 / i5) und Java spezialisiert hat.

RP Logo RP-Datentechnik Hamburg oHG
Peutestr. 51
20539 Hamburg

Tel: 040 / 780 48 4 - 0
E-Mail: kontakt@rp-datentechnik.com

www.rp-datentechnik.com

Blog-Rubriken