DIV Container einheitliche Höhe

Hallo ihr Administratoren,
ich habe DIVs mit der display: inline-block Eigenschaft. An sich funktioniert alles, aber wenn in einem Container mehr Text ist, wird dieser von der Höhe her anders dargestellt als die anderen. Gibt es eine Möglichkeit alles DIVs gleich groß zu machen?

<div class="index-items">  
                    <img src="uploads/iconmonstr-car-3-120.png" class="index-image" alt="Bild" />  
                    <div class="footer">  
                         <label>EU-Neuwagen-Beschaffung</label>
                     </div>
                 </div>

.index-items {
        display: inline-block;
        width: 25%;
        padding-top: 40px;
        border: 1px solid #818181;
        height: 25%;
        background-color: #212121;
        margin-top: 40px;
        margin-right: 40px;
    }
    .index-items:hover {
        border: 1px solid yellow;
    }
    .footer {
        text-align: center;
        bottom: 0;
        color: yellow;
    }
    .footer label {
        padding-left: 10px;
        padding-right: 10px;
    }

    .index-image {
        margin: auto;
        display: block;
        width: 28%;
    }

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 336518

Url: https://administrator.de/forum/div-container-einheitliche-hoehe-336518.html

Ausgedruckt am: 22.12.2024 um 23:12 Uhr

7 Kommentare

Neuester Kommentar

Hallo,

Es gibt max-height oder so ähnlich. Damit sollte es gehen

Gruß an die IT-Welt,
J Herbrich

Moin,

wie herberich bereits schrieb: ein max-height könnte dein Problem lösen:
https://www.w3schools.com/cssref/pr_dim_max-height.asp

Gruß
em-pie

Bin ganz deiner Meinung. Zumindest nutze ich bei sowelchen Menus immer eine Max Height Eigenschaft

Gruß an die IT-Welt,
J Herbrich

Danke, aber wie mache ich das jetzt, dass der eine Container richtig in die Reihe kommt? Der erste ist ja nach oben hin versetzt

Ohh mann...

du willst deine Kacheln doch positionieren, oder nicht?
Dann suche doch einfach nach "CSS positionieren" und irgendwann stolperst du über dieses Property:
https://www.w3schools.com/css/css_positioning.asp

Mit vorkauen ist der Lerneffekt gleich Null...

Lies dich auch mal hier ein:
Link

Danke für die Antwort, ich habe als display die inline-blick Eingenschaft und als position: relative. Das erste ist aber immer noch nach oben versetzt