Image Flexbox

hatschiii · #1 (**permalink**) 03.08.2020, 16:31

Ich will mir eine image flex-box bauen die so aussieht:

Jetzt sollen hier 4 Teaser nebeneinander stehen die jeweils 25% der Breite in Anspruch nehmen. Verändert man die Fensterbreite verändert sich die Breite der teaser. Das Problem ist, dass der Inhalt (Content) unterschiedlich lang ist
Der Teaser soll aber immer die gleiche Höhe haben und der Link immer am unteren Rand stehen.

Besteht der Content bei 3 Teasern aus 3 Zeilen, bei einem aus 2 Zeilen müsste bei dem mit 2 Zeilen "quasi" eine Leerzeile eingefügt werden.

Praktisch sieht das so aus das der Content Bereich immer die gleiche Höhe haben soll wie der des höchsten content bereichs der anderen Teaser.

Das das mit Flexbox geht ist mir klar... nur bin ich kein Programmierer und gerade gnadenlos am scheitern. Hoffe hier kann mir jemand helfen!?

hatschiii · #2 (**permalink**) 03.08.2020, 16:42

Der Teaser besteht sozusagen aus 4 Elementen und es sollen alle Elemente immer gleich hoch sein. Für jedes Element bestimmt das höchste Element die Höhe der anderen gleichen Elemente

Per flexbox den gesamten Teaser auf eine Höhe setzen ist einfac... Es sollen jedoch die einzelnen Elemente des Teasers auf eine Höhe gesetzt werden. Als alle Imgae Elemente eine Höhe, alle Title Elemente eine Höhe, alle Content Elemente eine Höhe und alle Link Elemente eine Höhe.

Das reicht fürs erste.

Allerding... wenn die Gesamtbreite zu schmal wird soll das Ganze umbrechen in 2 Zeilen udn 2 Spalten. Das ist auch einfach... nur sollen dann nicht alle Content Elemente die gleiche Höhe haben sondern alle Content Elemente in der gleiche Zeile

hatschiii · #3 (**permalink**) 03.08.2020, 17:14

Was ich jetzt habe ist das der Content Bereich in einem <p></p> Element steht
Kann ich hieraus <p class="flex-item"></P> machen und irgendwie definieren das alle Klassen "flex-item" immer die gleiche Höhe haben?

hatschiii · #4 (**permalink**) 03.08.2020, 17:49

Ok, hier der Code den ich habe und das Ergebnis. Jetzt muss nur noch der Content Bereich in jeder Zeile in gleiche Höhe gebracht werden und dabei "Read me" in einer Linie stehen

1 Zeile und 4 Spalten (Desktop)

2 Zeilen und 2 Spalten (Tablet) !!! In der 1. Zeile muss die linke Box höher werden, die 2. Zeile soll aber NICHT höher werden.

Und hier der HTML und CSS Code. Für jeden Teaser wird der gleiche HTML Code ausgespielt, es gibt aber eine class="container" die alle Teaser umfasst.

PHP-Code:


			
/* HTML */



<div class="uc_classic_content" id="{{uc_id}}">

        <div class="uc_classic_content_container_holder" style="background-color:{{bg_color}};">

            <div class="uc_classic_content_placeholder">

                <img src="{{image}}" alt="">

            </div>

            <div class="uc_classic_content_content">

                <h2 style="color:{{primary_color}};">{{title|raw}}</h2>

                <p style="color:{{primary_color}};">{{content|raw}}</p>

                <a class="uc_more_btn" style="color:{{primary_color}}; border:{{btn_border}} 1px solid; background-color:{{bg_color}};" href="{{link}}" target="{{target}}">{{btn_text|raw}}</a>



            </div>

        </div>

   </div>



/* CSS */



#{{uc_id}} .uc_classic_content_content  

{

    color:{{btn_hvr_clr}} !important;

    border:{{btn_hvr_clr}} 0px none !important;

    box-shadow:#ffffff 0px 0px 0px  ;

      vertical-align: top !important;

}

.uc_classic_content .uc_classic_content_container_holder {

     padding: 0px !important; 

    box-shadow:#ffffff 0px 0px 0px  ;

}

.uc_classic_content .uc_classic_content_content .uc_more_btn {

    padding-bottom: 10px !important;

      line-height: 14px !important;

}

.uc_classic_content .uc_classic_content_placeholder {

     padding-bottom: 15px !important; 

     background-color:#fafafa;

}

.uc_style_image_card_content_box_elementor_content {

     font-size: 14px !important;

}

.uc_classic_content .uc_classic_content_content p {

     margin-bottom: 26px; 

}

.uc_more_btn {

      border: #fafafa !important;

}

}

hatschiii · #5 (**permalink**) 03.08.2020, 19:48

https://dlgo.de/video.mp4

hatschiii · #6 (**permalink**) 03.08.2020, 22:58

Gerade entdeckt... das macht genau was es soll... nur bekomme ich es nicht "umgeschrieben" auf meinen Code

https://codepen.io/jensgro/pen/jqrXbj

Glaube ich brauche jetzt nen Sandsack

cloned · #7 (**permalink**) 05.08.2020, 09:35

Also du hast bei deinem Quelltext viel zu viele Elemente, da müsste man zuerst aufräumen. Bau doch die Struktur auf wie bei deinem Codepen?
Verzichte auch auf !important, das brauchst du bei deiner Problemstellung nun wirklich nicht.

hatschiii · #8 (**permalink**) 05.08.2020, 13:11

Danke cloned... habe das mal alles umgebaut wie bei codepen

...und es funktioniert.
Manchmal steckt amn einfach fest und sieht die einfachsten Lösungen nicht

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
mit Schleife Script reduzieren	css_user	Javascript & Ajax	3	27.06.2013 15:51
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
mouseover problem	Basti82	Javascript & Ajax	0	13.10.2008 14:17
CSS Hack	dalmidog	CSS	1	28.03.2008 17:32
Imagemap Zugriff bei einer Gallery	Sarah14	Javascript & Ajax	3	12.11.2007 14:06