zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Image Flexbox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.08.2020, 16:31
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard Image Flexbox

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!?

Geändert von hatschiii (03.08.2020 um 16:35 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.08.2020, 16:42
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von hatschiii (03.08.2020 um 17:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.08.2020, 17:14
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 03.08.2020, 17:49
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

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>
                <
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-aligntop !important;
}
.
uc_classic_content .uc_classic_content_container_holder {
     
padding0px !important
    
box-shadow:#ffffff 0px 0px 0px  ;
}
.
uc_classic_content .uc_classic_content_content .uc_more_btn {
    
padding-bottom10px !important;
      
line-height14px !important;
}
.
uc_classic_content .uc_classic_content_placeholder {
     
padding-bottom15px !important
     
background-color:#fafafa;
}
.
uc_style_image_card_content_box_elementor_content {
     
font-size14px !important;
}
.
uc_classic_content .uc_classic_content_content p {
     
margin-bottom26px
}
.
uc_more_btn {
      
border#fafafa !important;
}


Geändert von hatschiii (03.08.2020 um 18:35 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 03.08.2020, 19:48
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

https://dlgo.de/video.mp4
Mit Zitat antworten
  #6 (permalink)  
Alt 03.08.2020, 22:58
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 05.08.2020, 09:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.073
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 05.08.2020, 13:11
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:26 Uhr.